zoukankan      html  css  js  c++  java
  • [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();
                            }
                    });
  • 相关阅读:
    Flink Flow
    Excellent JD
    Storm Flow
    Fundmentals in Stream Computing
    SpringBoot
    Generic/Template Programming in Flink
    Talks on C/S
    Thrift-RPC client in Flume
    Aysnc-callback with future in distributed system
    Unity Shader入门教程(二)最基本的Diffuse和Normal样例
  • 原文地址:https://www.cnblogs.com/taoshihan/p/12881456.html
Copyright © 2011-2022 走看看