场景描述:前端常用iframe来嵌入其他域名页面,通常只是静态展示;如果是自己系统群的两个站点嵌套,则可以通过代码配合实现互相通信,实现父子域相互操作。前提是父子域名相同,否则浏览器出于安全协议会阻止跨域操作。
我的需求:
https://mh.cmft.com站点需要嵌入https://fhdmp.cmft.com站点的页面,且通过操作https://mh.cmft.com可以触发https://fhdmp.cmft.com页面的事件。
以下https://mh.cmft.com称A,https://fhdmp.cmft.com称B
A的配置:
// A嵌入B
<iframe id="iframeId" src="https://fhdmp.cmft.com/dataEntry/baseData/dataImport/index"></iframe>
// 向B发送数据
document.getElementById('iframeId').contentWindow.postMessage(postData, 'https://fhdmp.cmft.com')
// 绑定message事件和用于B来触发的函数receiveMsg
window.addEventListener('message', this.receiveMsg, false)
// receiveMsg接收B的触发,e为事件对象
receiveMsg (e) {
console.log(e.data) // B发送的数据
},
B的配置:
// 绑定message事件和用于A来触发的函数receiveMsg
window.addEventListener('message', this.receiveMsg, false)
// receiveMsg接收A的触发,e为事件对象
receiveMsg (e) {
console.log(e.data) // A发送的数据
},
// B像A发送数据
postDataToPrent (val) {
window.top.postMessage(val, 'https://mh.cmft.com')
}