【JavaScript】页面间通信

message事件监听

上级页面的window监听message，下级页面使用postMessage发送消息给事件处理。
上级页面：

window.addEventListener('message',(e)=>{
	// window.parent.postMessage(e.data,'*'); 可以再传给上上级
});

下级页面：

window.opener.postMessage(e.data,'*'); 

window.open和postMessage

上级页面，使用window.open打开和控制子页面的操作。使用定时器，来监听子页面的回传数据，并进行相应的操作。

let winChild = window.open(url,'_blank');
setTimeout(()=>{  // 使用定时器，让子页面已初始化完成，再发送信息
	winClild.postMessage('to child', '*'); // 上级页面传到下级页面
},2000);
let tag = '';
window.addEventListener('message',(e)=>{
	tag=e.data;
});
let TimeoutCount=0;
let itvl = setInterval(()=>{
	TimeoutCount++;
	if(TimeoutCount>100){
		// 按次数计算超时，超时处理
		winClild.close(); // 关闭子页面
		window.removeEventListener('message');
		clearInterval(itvl );
	}
	if(tag=='ok'){
		// 子页面返回的信息是ok后
		winClild.close(); // 关闭子页面
		window.removeEventListener('message');
		clearInterval(itvl );
	}
},1000);

子页面，可以监听上级页面的通信，也可以发送消息给上级页面，window.opener操作的是上级页面：

window.addEventListener('message',(e)=>{
	console.log(e.data); //  打印上级页面发送来的数据
});
window.opener.postMessage(e.data, '*');  // 发送数据给上级页面