1. 子页面传值-父页面取值响应
在主页面中点击iframe页面(子页面)时,子页面监听message事件并做出响应,返回参数给父页面,父页面做出响应。子页面的点击事件,代码如下:
function toIMWEBIndexPage() {
window.top.postMessage({code:200},'*');
}
主页面接收code响应事件,代码如下:
window.addEventListener('message',self.iframeEventHandler,false);
iframeEventHandler(event) {
let self = this;
let resp = event.data;
if (resp.code !== undefined) {
// iframe 定义的code 进行事件分发
switch (resp.code) {
case 100:
// 未登录状态,隐藏vue列表
self.oaIsVisable = false;
break;
case 200:
// 点击iframe列表 ,隐藏vue列表
self.oaIsVisable = false;
// self.$router.push({
// name: "im_web_chat"
// });
break;
case 300:
// 登录状态 ,显示vue列表
self.oaIsVisable = true;
break;
default:
self.oaIsVisable = false;
break;
}
}
}
- 父页面传值-子页面取值响应
在主页面中点击主页面的事件,子页面做出响应,主页面代码如下:
var iframe = document.getElementById("show-iframe");
if(iframe){
iframe.contentWindow.postMessage({code:201}, '*');
};
子页面监听message事件并做出响应,代码如下:
window.addEventListener("message",function(obj){
let resp = obj.data;
switch (resp.code) {
case 201:
break;
default:
break;
}
},false);