iframe 父子之间的传值

最新推荐文章于 2025-10-22 11:19:31 发布

原创最新推荐文章于 2025-10-22 11:19:31 发布 · 1.4k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

1.父给子传值：经过一个点击事件，给子页面传值，显示不同的模型

父页面代码：

<iframe :src='iframeShowUrl.showURL' :height="iframeShowUrl.domHeight" id="iframe_container" width="100%"/>

事件：

onclick(row, column, event){
        var iframe = document.getElementById('iframe_container');
        var json = {
            type:1,
            num:parseInt(row.num),
        };
        iframe.contentWindow.postMessage(JSON.stringify(json),'*');
},

子页面代码：

window.addEventListener('message', function (e) {
var data = JSON.parse(e.data);//转化为json
type= parseInt(data.type)
       num = parseInt(data.num）
//防止异常
try {
           if (type== 1) {
               if(num == 0){ 自己业务......
               }else{ 自己业务......
               }
           }else if(type== 2){
               if(num == 0){ 自己业务......
               }else{ 自己业务......
               }
           }
}
catch (err) {
}
}, false);

2，子页面给父页面传值：经过点击事件传值

子页面代码：

function NameSendTest(SensorName) {
       var json = {
           func_type :"moni_draw"
           data:SensorName
       }
   window.parent.postMessage（JS0N.stringify(json),'*'）;
   }

父页面代码：需要监听

mounted() {
     window.addEventListener("message",this.onMessagessss);
}，

methods:{
      this.onMessagessss(e){
            var data = JSON.parse(e.data);//转化为json
            console.log(data )
            做自己业务....
      }  
}

点击F12，可以看到输出的值如下