需求背景
最近在做H5项目时,遇到一个需求,公司所有的项目共用了一个防人机页面,当人机验证完成时需要把结果参数发送给调用它的父页面,APP端在使用验证页面时,结果是通过H5与APP交互方法传递的;但是H5引用这个页面时,只能通过iframe内嵌的方式来实现,这样在验证通过后就面临着iframe内嵌页面需要将验证结果发送给外部父页面,通知外部父页面做相应的处理;
实现方式
1.父页面发送消息,子页面接受消息
父页面:
<!-- a.index.html -->
<h1>父页面</h1>
<iframe id="iframe" src="http://b.index.com"></iframe>
const iFrame = document.getElementById('iframe')
<!-- 需要等到iframe中的子页面加载完成后才发送消息,否则子页面接收不到消息 -->
iFrame.onload = function(){
<!-- iFrame.contentWindow获取到iframe的window对象 -->
iFrame.contentWindow.postMessage('父页面发送的消息','http://b.index.com');
}
子页面:
//有发送就有接收,与postMessage配套使用的就是message事件
window.addEventListener('message',e=>{
<!-- 对消息来源origin做一下过滤,避免接收到非法域名的消息导致的xss攻击 -->
if(e.origin==='http://a.index.com'){
console.log(e.origin) //父页面URL,这里是http://a.index.com
console.log(e.source) // 父页面window对象,全等于window.parent/window.top
console.log(e.data) //父页面发送的消息
}
},false)
2.子页面发送消息,父页面接受消息
子页面:
window.parent.postMessage('子页面发送的消息','http://a.index.com')
父页面:
window.addEventListener('message',e=>{
<!-- 对消息来源origin做一下过滤,避免接收到非法域名的消息导致的xss攻击 -->
if(e.origin==='http://b.index.com'){
console.log(e.origin) //子页面URL,这里是http://b.index.com
console.log(e.source) // 子页面window对象,全等于iframe.contentWindow
console.log(e.data) //子页面发送的消息
}
},false)
注意:
- window.postMessage中的window指的是你想发送跨域消息的那个窗口(你需要通信的目标窗口),而不是自身窗口的window
- 父页面中:父页面向子页面发送跨域信息,window就是在父页面中嵌入的iframe指向的子页面的window,即:iFrame.contentWindow
- 子页面中:子页面想父页面发送跨域信息,window就是父页面的window,在这里因为子页面是嵌入到父页面中的,对于子页面来讲,window就是top或者parent
- 需要等到iframe中的子页面加载完成后才发送消息,否则子页面接收不到消息
- 在监听message事件时需要判断一下消息来源origin
最后附送父页面检测到子页面发送的消息后,调用iframe子页面自刷新方法:
父页面:
window.addEventListener("message", e => {
if (e.data && e.data.verifData) {
//调用子页面自刷新
e.source.location.reload(true)
}
}, false)