[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();
                        }
                });