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

当在后台界面使用iframe嵌套时,如果子iframe嵌套页想要点击一个连接,进行界面的刷新,就需要向父iframe传递信息,父iframe再去更新iframe的url

子iframe点击时调用openUrl方法,传递信息给父

    <!-- 引入组件库 -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/index.js"></script>
    >

        new Vue({
            el: '#toutiaolist,data: function () {
                return {
                    fullscreenLoading:true (url) {
                    var data={url:url};
                    window.parent.postMessage(data);
                },},created:  () {

            }
        })
    </>

父iframe接收到信息,更新iframe的url

   ="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
        #app {
                    iframeUrl: "index.PHP?r=media/weibolist (url,msg) {
                    this.iframeUrlurl+&time= Date().getTime();
                },created:(){
                let _this;
                window.addEventListener(message(e){
                        if(e.data.url){
                            _this.iframeUrle.data.url Date().getTime();
                        }
                });
            }
        });

    >

主要靠这个

                let _this=this;
                window.addEventListener('message',function(e){
                        if(e.data.url){
                            _this.iframeUrl=e.data.url+"&time="+new Date().getTime();
                        }
                });