作用
window.postMessage()方法可以安全地实现跨源通信。
一般情况下，两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议（通常为https）、端口号（443为https的默认值），以及主机 (两个页面的模数 Document.domain设置为相同的值) 时，这两个脚本才能相互通信。window.postMessage()方法提供了一种受控机制来规避此限制。
注意：只要正确的使用，这种方法就很安全。
语法
1、 发送消息
targetWindow.postMessage(message, targetOrigin, [transfer]);
-
targetWindow
其他窗口的一个引用，比如iframe的contentWindow属性、执行window.open返回的窗口对象、或者是命名过ID或数值索引的window.frames。 -
message
将要发送到其他 window的数据。 -
targetOrigin
通过窗口的origin属性来指定哪些窗口能接收到消息事件，其值可以是字符串"*"（表示无限制）或者一个URI（强烈建议使用URL，目标窗口的协议、主机地址或端口这三者都匹配，消息才会被发送。防止消息泄露）。 -
transfer
可选。是一串和message 同时传递的Transferable对象. 这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。
2、监听消息
window.addEventListener("message", receiveMessage, false);
function receiveMessage(event){
// For Chrome, the origin property is in the event.originalEvent
// var origin = event.origin || event.originalEvent.origin;
}
接收消息的event
-
data
从其他 window 中传递过来的对象。 -
origin
调用postMessage时消息发送方窗口的 origin . 这个字符串由 协议、“://“、域名、“ : 端口号”拼接而成。例如 “https://example.org(隐含端口443)”、“http://example.net(隐含端口80)”、“http://example.com:8080”。请注意，这个origin不能保证是该窗口的当前或未来origin，因为postMessage被调用后可能被导航到不同的位置。 -
source
对发送消息的window对象的引用; 您可以使用此来在具有不同origin的两个窗口之间建立双向通信。
实例
parent HTML
<body>
<iframe id="iframeChild" src="./child.html"></iframe>
<button onclick="sendMsg()">发送消息</button>
</body>
<script>
function sendMsg(){
var myIframe = window.frames["iframeChild"];
myIframe.contentWindow.postMessage(
"The message from parent Page",
"http://127.0.0.1:5501/html/iframe/child.html"
);
}
</script>
iframe HTML
<body>
<div>iFrame-child</div>
<script>
function receiveMessage(event) {
// 我们能相信信息的发送者吗? (也许这个发送者和我们最初打开的不是同一个页面).
if (event.origin !== "http://127.0.0.1:5501"){
console.log('不是我需要监听的消息');
return;
}
console.log('child_log:',event);
// event.source 是我们通过window.open打开的弹出页面 popup
// event.data 是 popup发送给当前页面的消息 "hi there yourself! the secret response is: rheeeeet!"
}
window.addEventListener("message", receiveMessage, false);
</script>
</body>
总结
- 如果不希望从其他网站接收message，请不要为message事件添加任何事件侦听器。 这是一个完全万无一失的方式来避免安全问题。
- 如果希望从其他网站接收message，请始终使用
origin和source属性验证发件人的身份。 - 当使用postMessage将数据发送到其他窗口时，始终指定精确的目标
origin，而不是*。
网友评论