很多情况下,我们受到浏览器的安全策略限制。如何能规避此限制,并且能安全的使用跨域通讯,这就不得不介绍一下 postMessage 了。
一、关于 postMessage
window.postMessage() 方法可以安全地实现跨源通信。
通常,对于两个不同页面的脚本,只有当执行它们的页面位于具有相同的协议(通常为 https
),端口号(443
为 https
的默认值),以及主机 (两个页面的模数 Document.domain
设置为相同的值) 时,这两个脚本才能相互通信。
window.postMessage()
方法提供了一种受控机制来规避此限制,只要正确的使用,这种方法就很安全。
二、理解过程
window.postMessage()
方法被调用时,会在所有页面脚本执行完毕之后向目标窗口派发一个 MessageEvent
消息。 该 MessageEvent
消息有四个属性:
1.message
属性表示该 message
的类型;
2.data
属性为 window.postMessage
的第一个参数;
3.origin
属性表示调用 window.postMessage()
方法时调用页面的当前状态;
4.source
属性记录调用 window.postMessage()
方法的窗口信息。
关于更多细节,我们可以查看 MDN 文档,这里就不赘述了。