[javascript] vuejs的elementui实现父子iframe通信
[javascript] vuejs的elementui实现父子iframe通信
唯一Chat
发布于 2020-05-19 13:00:34
发布于 2020-05-19 13:00:34
当在后台界面使用iframe嵌套时 ,如果子iframe嵌套页想要点击一个连接 ,进行界面的刷新,就需要向父iframe传递信息 , 父iframe再去更新iframe的url
子iframe点击时调用openUrl方法 , 传递信息给父
<!-- 引入组件库 -->
<script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.1/lib/index.js"></script>
<script>
new Vue({
el: '#toutiaolist',
data: function () {
return {
fullscreenLoading:true,
}
},
methods: {
openUrl: function (url) {
var data={url:url};
window.parent.postMessage(data);
},
},
created: function () {
}
})
</script>父iframe接收到信息 , 更新iframe的url
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.1/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data: function () {
return {
iframeUrl: "index.php?r=media/weibolist",
}
},
methods: {
openUrl: function (url,msg) {
this.iframeUrl=url+"&time="+new Date().getTime();
},
},
created:function(){
let _this=this;
window.addEventListener('message',function(e){
if(e.data.url){
_this.iframeUrl=e.data.url+"&time="+new Date().getTime();
}
});
}
});
</script>主要靠这个
let _this=this;
window.addEventListener('message',function(e){
if(e.data.url){
_this.iframeUrl=e.data.url+"&time="+new Date().getTime();
}
});本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020-05-13 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读