window.postMessage使用详解（参数、transferable接口详解、使用注意点、示例）

目录

window.postMessage(message, targetOrigin, [transfer])

参数

transferable接口详解

使用注意点

实例

窗口1

窗口2

运行效果

事件默认参数

---

window.postMessage(message, targetOrigin, [transfer])

可以安全地实现跨源通信。通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议（通常为https），端口号（443为https的默认值），以及主机  (两个页面的模数 Document.domain设置为相同的值) 时，这两个脚本才能相互通信。window.postMessage() 方法提供了一种受控机制来规避此限制，只要正确的使用，这种方法就很安全。

从广义上讲，一个窗口可以获得对另一个窗口的引用（比如 targetWindow = window.opener），然后在窗口上调用 targetWindow.postMessage() 方法分发一个  MessageEvent 消息。接收消息的窗口可以根据需要自由处理此事件 (en-US)。传递给 window.postMessage() 的参数（比如 message ）将通过消息事件对象暴露给接收消息的窗口。

参数

参数	说明
window	窗口的一个引用，比如 iframe 的 contentWindow 属性、执行 window.open 返回的窗口对象、或者是命名过或数值索引的 window.frames（注意需要用相同的window监听消息）。
message	只能为字符串，将要发送到其他 window的数据。
targetOrigin	指定哪些窗口能接收到消息事件，其值可以是 *（表示无限制）或者一个 URI（注意指定URI不支持跨域，会报错，而*号支持跨域）。
transfer	可选，是一串和 message 同时传递的 Transferable 对象。这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。Transferable 接口代表一个能在不同可执行上下文之间，列如主线程和 Worker 之间，相互传递的对象。

transferable详解

Transferable - Web API 接口参考 | MDN

使用注意点

1.监听时使用window.addEventListener("message",(e)=>{}, false)，必须保证监听的window和发送消息的window相同。

2.需要确定先监听了message事件，再发送的消息。

3.targetOrigin指定了URI的话，必须是相同的域和端口号，不然会报跨域错误。

4.targetOrigin使用*号的话，支持跨域，我们可以通过监听消息的默认参数e.origin来判断是否接收到了正确的消息

实例

窗口1

端口5050

    
    
    
    


    
窗口1
    
    

窗口2

端口5051

    
    
    


    
窗口2
    

运行效果

事件默认参数

• e.source – 消息源，消息的发送窗口/iframe。
• e.origin – 消息源的 URI(可能包含协议、域名和端口)，用来验证数据源。
• e.data – 发送过来的数据。