目录
一、概述
二、详解
----
一、概述
作用
该方法是HTML5引入的API，可以通过异步方式实现跨源通信，多用于窗口间数据通信。它提供了一种受控机制来规避不同源脚本无法通信的限制，只要正确使用，这种方法很安全。
什么是跨源
同源即指相同的协议、域名或IP、端口号。浏览器具有同源限制，同源脚本可以相互通信，一般非同源（跨源）的脚本文件禁止相互通信。
语法
message事件
通过绑定window的message事件来监听发送的跨文档消息传输内容。
二、代码示例
示例1
发送程序如下代码所示。
接收程序如下代码所示。
e.source：消息源，消息的发送窗口/iframe
e.origin：消息源的URL（可能包含协议、域名或IP、端口），用来验证数据
e.data：发送过来的数据
示例2：iframe父子页面通信
接收消息的一方需要监听message事件。
window.addEventListener(“message”, ()=> {
});父页面向子页面传递信息。
let ifr = document.getElementById("iframe")
ifr.contentWindow.postMessage('父页面向子页面发送消息', "*")
// or
ifr.contentWindow.postMessage('父页面向子页面发送消息', "http://10.192.195.166:56225/son.html")子页面向父页面传递数据。
window.parent.postMessage('子页面向父页面发送消息','*')
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/hz/137121.html