本文已参与「新人创作礼」活动，一起开启掘金创作之路。对于内嵌其他域名的iframe页面，父子页面是没有权限去直接访问各自的页面对象的。

我们经常会需要相互传递消息去实现一些特定的功能，比如内嵌直播页面，在直播下课时去弹出评价，以往使用ws的方式还需要一个服务器去中转消息，而且建立ws长链接会比较消耗服务端的性能。如果能直接去获取内部页面传递出来的消息，不经过服务端，这样就可以很方便的实现该功能。

postMessage给我们提供了这个方式。

按惯例，使用前先确认浏览器兼容性，去 caniuse.com/ 查询

可以看到，postMessage在PC端的支持还是很好的，这个功能一般也是用在PC端上，可以使用

window.postMessage

window.postMessage() 方法可以安全地实现跨源通信。通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议（通常为https），端口号（443为https的默认值），以及主机 (两个页面的模数 Document.domain设置为相同的值) 时，这两个脚本才能相互通信。window.postMessage() 方法提供了一种受控机制来规避此限制，只要正确的使用，这种方法就很安全。
从广义上讲，一个窗口可以获得对另一个窗口的引用（比如 targetWindow = window.opener），然后在窗口上调用 targetWindow.postMessage() 方法分发一个 MessageEvent ****消息。接收消息的窗口可以根据需要自由处理此事件 (en-US)。传递给 window.postMessage() 的参数（比如 message ）将通过消息事件对象暴露给接收消息的窗口。

语法

otherWindow.postMessage(message, targetOrigin, [transfer]);

otherWindow
其他窗口的一个引用，比如iframe的contentWindow属性、执行window.open返回的窗口对象、或者是命名过或数值索引的window.frames。
message
将要发送到其他 window的数据。它将会被结构化克隆算法序列化。这意味着你可以不受什么限制的将数据对象安全的传送给目标窗口而无需自己序列化。[1]
targetOrigin
通过窗口的origin属性来指定哪些窗口能接收到消息事件，其值可以是字符串""（表示无限制）或者一个URI。在发送消息的时候，如果目标窗口的协议、主机地址或端口这三者的任意一项不匹配targetOrigin提供的值，那么消息就不会被发送；只有三者完全匹配，消息才会被发送。这个机制用来控制消息可以发送到哪些窗口；例如，当用postMessage传送密码时，这个参数就显得尤为重要，必须保证它的值与这条包含密码的信息的预期接受者的origin属性完全一致，来防止密码被恶意的第三方截获。如果你明确的知道消息应该发送到哪个窗口，那么请始终提供一个有确切值的targetOrigin，而不是。不提供确切的目标将导致数据泄露到任何对数据感兴趣的恶意站点。
transfer（可选）
是一串和message 同时传递的 Transferable 对象. 这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。

使用方式

这里以独树云直播与线上教育观看页通讯为例说明 A页面 —— 线上教育观看页 B页面 —— 独树云直播观看页

打开A页面，内嵌B页面，在A页面监听message事件 window.addEventListener('message', (event) => {});
在B页面加载完成后，监听message事件 window.addEventListener('message', (event) => {});
短暂延迟后，A页面调用B页面的window.postMessage(msgContent, B.src)，向B页面发送自定义的初始化消息
B收到预设的初始化消息 'postMessageRegister'，记录下A页面的window —— event.source 和A页面的域名, event.origin，完成初始化
后续B页面在达到一定条件后，调用A页面window.postMessage(msgContent, A.src) 向A页面发消息
A页面收到消息后，做出对应的响应

graph TD
A["加载页面A，内嵌页面B"] -- "A监听message事件" --> B("B页面加载完成后，B监听message事件")
B -- "延迟1s，防止加载时机问题" --> C("A调用B window.postMessage 发送初始化消息postMessageRegister")
C -- "B收到初始化消息" --> D("记录匹配的source 和 origin 完成配对初始化")
D -- "直播间下课" --> E("调用source.postMessage 给A发消息")
E -- "A 收到消息" --> F("执行对应的业务操作")

注意事项：

addEventListener后，在路由销毁前，需要removeEventListener，否则收到消息会被处理多次
addEventListener 对应的执行function需要是具名函数，否则无法remove

跨域消息通讯postMessage

window.postMessage

语法

使用方式