iframe与父页面双向通信

。

父/子页面监听接收到的postMessage消息：

window.addEventListener("message", this.iframeLoadSuccess, false);

方法内处理数据

iframeLoadSuccess(event){
 // 预览的iframe加载成功
 console.log(event.data,"iframe加载成功");
},

移除message的某个方法：

window.removeEventListener("message", this.sendMessage(), false);

父页面向子页面发送消息：

sendMessage() {
      console.log(this.editFormInfo,"调用postMessage方法");
      // 外部vue向iframe内部传数据(iframe为H5表单)
      this.iframeWin.postMessage({xxx:xxx},"*");//*代表任意域名
      console.log("发送message信息");
    },

子页面向父页面发送消息：

window.parent.postMessage({xxx:xxx},"*");

判断页面是否被嵌入iframe里面

window.self === window.top
//1. 如果返回false –> 说明页面被嵌套在iframe中了 
//2. 如果返回true –> 说明页面并没有被嵌套在iframe中 

 

 

。