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) // 再给我发一张
}