postMessage和onmessage Cross-document messaging

最新推荐文章于 2023-06-28 15:46:58 发布

wen_binObject

最新推荐文章于 2023-06-28 15:46:58 发布

阅读量254

点赞数

分类专栏：个人日记文章标签： postMessage onmessage Cross-document messaging 解决不同域之间的通信

本文链接：https://blog.csdn.net/wen_binobject/article/details/84984517

版权

解决了在网页文档之间互相接收与发送信息的功能问题。

由于同源策略的限制，JavaScript 跨域的问题，一直是一个颇为棘手的问题。HTML5 提供了在网页文档之间互相接收与发送信息的功能。使用这个功能，只要获取到网页所在窗口对象的实例，不仅同源（域 + 端口号）的 Web 网页之间可以互相通信，甚至可以实现跨域通信。要想接收从其他窗口发送来的信息，必须对窗口对象的 onmessage 事件进行监听，其它窗口可以通过 postMessage 方法来传递数据。该方法使用两个参数：第一个参数为所发送的消息文本，但也可以是任何 JavaScript 对象（通过 JSON 转换对象为文本），第二个参数为接收消息的对象窗口的 URL 地址，可以在 URL 地址字符串中使用通配符'*'指定全部地。

为了实现不同域之间的通信，需要在操作系统的 hosts 文件添加两个域名，进行模拟。

hosts 文件中添加两个不同的域名

127.0.0.1 parent.com
127.0.0.1 child.com

在父网页中通过 iframe 嵌入子页面，并在 JavaScript 代码中调用 postMessage 方法发送数据到子窗口。

父页面中嵌入子页面，调用 postMessage 方法发送数据

<html> 
 <head> 
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
 <title>Test Cross-domain communication using HTML5</title> 
 <script type