js 关于iframe页面之间通信, 传递消息

1. 简介

我们一般通过使用postMessage和onmessage这两个HTML5的方法, 来解决跨页面通信问题, 或者通过iframe嵌套的不同页面之间的通信.

postMessage为发送方, onmessage为接收方

2. 方法简介

如果有一个父页面, 使用iframe嵌套了子页面
父页面html

<iframe id="proxy" class="myIframe" src="http://localhost:8089/pp/app/aa/bbbbb.html" ></iframe>

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

const iframe = document.getElementId('proxy')
iframe.contentWindow.postMessage({oldPhoto: '我的照片'}, "*");

方法的第一个参数是发送的消息，无格式要求；第二个参数是域名限制，当不限制域名时填写*

2.2 子页面接收父页面发送的消息

window.onmessage = function(event){
	console.log(event.data.oldPhoto) // 我的照片
}

2.3 子页面向父页面传递消息

window.parent.postMessage({info: '再给我发一张'}, "*");

方法的第一个参数是发送的消息，无格式要求；第二个参数是域名限制，当不限制域名时填写*

2.4 父页面接收子页面传递的消息

window.onmessage = function(event){
	console.log(event.data.info) // 再给我发一张
}