[javascript] vuejs的elementui实现父子iframe通信

当在后台界面使用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();}});