父页面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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要给大家介绍了关于three.js中多线程的使用及性能测试的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-01-01
本篇文章讲解弹出浮动层的javascript函数, 以及函数的原理和使用注意事项.2011-02-02
这篇文章主要为大家详细介绍了瀑布流布局与自定义瀑布流布局插件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
今天小编就为大家分享一篇LayUI表格批量删除方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要为大家介绍了JSON与JavaScript对象关系及语法规则详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
这篇文章主要介绍了JS实现控制表格只显示行边框或者只显示列边框的方法,涉及javascript使用表格对象的rules属性的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03
这篇文章主要介绍了JS冒泡事件与事件捕获,结合实例形式分析了javascript冒泡的原理与阻止冒泡的相关操作技巧,需要的朋友可以参考下2016-11-11
今天继续学习JS中的对象，昨天学完了本地对象中的两个重要对象Array和Date。今天看下内置对象Global对象和Math对象。2009-12-12
在一个页面中，每一个外部JavaScript 及CSS文件都会导致一个额外的HTTP请求。所以，如何合理的合并JavaScript 文件及CSS文件也是前端工程师应该考虑的。2009-10-10
NodeJS 是一门年轻的语言，扩展模块并不太全，经常我们想用某个模块但是却找不到合适的2012-03-03
最新评论