html5 window.postMessage

最新推荐文章于 2024-08-04 00:46:01 发布

JackRenEngineer

最新推荐文章于 2024-08-04 00:46:01 发布

阅读量742

点赞数

本文链接：https://blog.csdn.net/JackRen_Developer/article/details/79673138

版权

出于安全考虑，浏览器限制了不同源文档间的通信。然而，window.postMessage提供了跨文档消息通信的安全方法，允许iframe、标签页和窗口进行跨源通信。此功能在构建实时跨源通信的应用中起到关键作用。通过指定数据和目标源，window.postMessage可以在同源或跨源场景下实现消息传递。

摘要由CSDN通过智能技术生成

出于安全考虑，运行在同一浏览器中的框架、标签页、窗口间的通信都受到了严格的限制。通常，只有在协议(规则)、端口、主机完全相同的时候，也就是同源(origin)文档才可以通信，不同页面之间的脚本才能够相互访问。这个安全策略虽然防止恶意网站与其他内容交互，但是也让制作有多个数据来源的聚合应用(mashup)变得很困难。

为了满足这一需求，浏览器厂商和标准制定机构一直同意引入一种新功能：跨文档消息通信(Cross Document Messaging)。跨文档消息通信可以确保iframe、标签页、窗口间安全的进行跨源通信。window.postMessage 使跨源通信成为一种安全的方法。window.postMessage 通过安全可靠的方式实现了对这个限制的突破，很方便的实现了跨文档消息通信。跨文档消息通信是构建实时(real-time)跨源(cross-origin)通信的两个重要模块之一(另一个是XMLHttpRequest Level 2)。

源(origin)的概念：由规则(scheme)、主机(host)、端口构成(port)组成。由于规则不同(如https与http)，所以https://www.123.com与http://www.123.com的源是不同的。而源不考虑路径，http://www.123.com/default.html与http://www.123.com/index.html 是同源的。当然window.postMessage不仅仅可以在跨源(cross-origin)通信中使用，在同源通信中也可以使用。

例如：

域名为www.a.com中的按钮事件需要在www.b.com域名中的网站中弹出一个提示语，需要做一下操作：