iframe——父子域通信

场景描述:前端常用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')
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值