父页面iframe中的第三方子页面跨域交互技术—postMessage实现方法
在web项目中通过iframe嵌入另一个第三方web项目，第三方web项目里点击某个按钮要实时调用web项目的全局函数打开某个全局弹窗或者进行路由跳转，这时候两个项目存在了数据交互，显然违反了同源策略，在HTML5标准引入的window对象下的postMessage方法，可以允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递。
window.postMessage是HTML5中新增的一个API（不能低于IE8）,postMessage方法允许来自不同源的脚本采用异步方式进行有限的通信 ,使其可以实现跨文本档、多窗口、跨域消息传递，这个API为 window 对象新增了一个window.postMessage方法，允许跨窗口通信，无论当前两个窗口否是同源。
postMessage传递消息
在 html5，window 对象上有一个方法叫做postMessage，与它的名字一样，这个方法就是用来发送信息的，但是它只能用来在两个窗口之间发送信息
发送消息方法的参数和使用
win.postMessage(data, origin) // win 这个参数为需要接受消息的 window 对象 // 当我们通过 window.open() 打开一个新窗口时，会返回一个新窗口的 window 对象，通过这个新窗口的 window 对象，就可以向新窗口发送消息 // 如果页面中有 frame 时，也可以通过这个 frame 对象发送消息 // data 为我们想要发送的数据，理论上 data 可以是任何可以被复制的数据类型，但是由于部分浏览器只支持传输 String 类型，所以传输的数据最好是通过 JSON.stringify() 序列化后再传输 // origin 为字符串，为目标窗口的源，由 协议+ip/域名+端口号 组成 // 如果想要传递给任意窗口，可以将这个参数设置为 * ，为了安全起见，不建议设置为 * // 如果目标窗口与当前窗口同源，则设置为 /
接收消息方法的参数和使用
window.addEventListener('message', function (e) {...})
// 第一个参数为这个事件监听器的类型，'message' 表示会监听当前窗口接收到的消息
// 第二个参数为接收到消息后的回调函数，在回调函数中，我们可以对发送消息的源进行一些验证，从而保证安全性
// 回调函数参数 e 上有很多属性，我们可以将其打印出来，其中 origin 表示发送消息窗口的源；source 属性表示发送消息的窗口，通过 e.source == window.opener 可以判断发送消息的窗口与打开当前页面的窗口是否为同一个；data 属性标书传递过来的数据使用场景
当想要在Web页面中嵌入一个来自其他站点的模块或者“gadget”的时候，利用 postMessage() 和 message 事件实现的跨域消息传递是很有用的。
首先 gadget 的开发者可以将 gadget 内容定义在一个 HTML 页面中，它负责监听 message 事件，并将它们分发给对应的 js 函数去处理。然后，嵌入 gadget 的Web页面就可以通过 postMessage() 方法传递消息来和 gadget 进行交互了。
使用示例
加入有a.html和b.html两个页面，a.html是父页面，b.html是子页面，可以是同源同一个网站（网址一样），也可以是不同源的跨域网站。
父级页面给子级页面传参
//a.html
<body>
<div class='body'>
<div class='left'>
<p>LEFT</p>
<button id='iframeEvent'>给子级页面传参</button>
</div>
<div class='right'>
<iframe id='ifrA' src="b.html" frameborder="0"
width='100%' height='100%'></iframe>
</div>
</div>
<script>
var ifr = document.getElementById('ifrA');
var send = document.getElementById('iframeEvent');
//父级页面发送参数
send.addEventListener('click', function() {
var url = 'http://127.0.0.1:5500/b.html';//地址必须为服务器地址（本地文件打开无效）
var val = '我是父级页面过来的参数';//传递的参数
ifr.contentWindow.postMessage(val, url)
}, false)
</script>
</body>//b.html
<body>
<p class='title'>我是子级页面</p>
<script>
window.addEventListener('message', function(event) {
var url = 'http://127.0.0.1:5500';//指定的源
if (event.origin != url) {//判断是否来自指定源
return;
}
console.log(event.data);//读取传递过来值
}, false)
</script>
</body>子级页面给父级页面传参
//a.html
<body>
<div class='body'>
<div class='right'>
<iframe id='ifrA' src="b.html" frameborder="0"
width='100%' height='100%'></iframe>
</div>
</div>
<script>
//接送参数
window.addEventListener('message', function(e) {
var url = 'http://127.0.0.1:5500';
if (e.origin != url) {
return;
}
console.log(e.data);
}, false)
</script>
</body>//b.html
<body>
<button class='childPage'>给父页面传递参数</button>
<script>
//发送子级页面的参数给父级页面
var btnEvent = document.querySelector('.childPage');
var data = '我是子级页面传递过来的参数';
btnEvent.addEventListener('click', function(e) {
window.parent.postMessage(data, 'http://127.0.0.1:5500/a.html')
}, false)
</script>
</body>安全问题
如果你不希望从其他网站接收 message，请不要为 message 事件添加任何事件监听器。
如果你确实希望从其他网站接收message，请始终使用 origin 和 source 属性验证发件人的身份。
当你使用 postMessage 将数据发送到其他窗口时，始终指定精确的目标 origin，而不是 *。
兼容性
所有主流浏览器（包括IE8）都支持。
到此这篇关于父页面iframe中的第三方子页面跨域交互技术—postMessage实现方法的文章就介绍到这了,更多相关iframe跨域postMessage内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了ES6基础之 Promise 对象用法,结合实例形式详细分析了ES6中 Promise 对象功能、用法及相关操作注意事项,需要的朋友可以参考下2019-08-08
这篇文章主要为大家详细介绍了javascript表单控件实例,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-09-09
这篇文章主要介绍了微信小程序8种数据通信的方式小结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-02-02
这篇文章主要为大家详细介绍了原生JS实现鼠标滑动撒爱心特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
这篇文章主要介绍了JS 拦截全局ajax请求实例解析的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-11-11
详解webpack require.ensure与require AMD的区别
本篇文章主要介绍了详解webpack require.ensure与require AMD的区别，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
这篇文章主要介绍了JS开发自己的类库,结合实例形式分析了javascript开发类库的原理、组成及实现方法,需要的朋友可以参考下2019-08-08
这篇文章主要为大家详细介绍了一些你不知道的JavaScript异步相关知识，文中的示例代码讲解详细，对我们学习JavaScript有一定帮助，感兴趣的可以跟随小编一起学习一下2022-11-11
这篇文章主要介绍了JS+CSS简单树形菜单实现方法,涉及JavaScript结合css动态操作页面元素结点的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-09-09
在实际应用中会遇到动态操作树各节点的需求，在增加树节点后如何实时动态刷新树就十分有必要了。这篇文章主要介绍了zTree实现节点修改的实时刷新功能,需要的朋友可以参考下2017-03-03
最新评论