JS postMessage跨域请求解决方案

    今天看到一篇非常好的文章，忍不住想转载过来，亲自测试了一下，解决了web开发中我们经常遇到最头痛的跨域请求的问题。文章主要是介绍了HTML5 postMessage 和 onmessage API 详细应用，比较长，我只截取了跨域请求解决方案的一部分，想查看全文的人可以去查看原文。

Cross-document messaging 简介

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

在 Cross-document messaging 中使用 postMessage 和 onmessage

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

清单 3. hosts 文件中添加两个不同的域名

1. 127.0.0.1      parent.com 
2. 127.0.0.1      child.com

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

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

1. <html> 
2.  <head> 
3.  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
4.  <title>Test Cross-domain communication using HTML5</title> 
5.  <script type="text/JavaScript"> 
6.      function sendIt(){ 
7.          // 通过 postMessage 向子窗口发送数据
8.          document.getElementById("otherPage").contentWindow 
9.              .postMessage( 
10.                  document.getElementById("message").value, 
11.                 "http://child.com:8080"
12.              ); 
13.      } 
14.  </script> 
15.  </head> 
16.  <body> 
17.      <!-- 通过 iframe 嵌入子页面 --> 
18.      <iframe src="http://child.com:8080/TestHTML5/other-domain.html" 
19.                  id="otherPage"></iframe> 
20.      <br/><br/> 
21.      <input type="text" id="message"><input type="button" 
22.              value="Send to child.com" onclick="sendIt()" /> 
23.  </body> 
24.  </html>

在子窗口中监听 onmessage 事件，并用 JavaScript 实现显示父窗口发送过来的数据。

清单 5. 子窗口中监听 onmessage 事件，显示父窗口发送来的数据

1. <html> 
2.  <head> 
3.  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
4.  <title>Web page from child.com</title> 
5.  <script type="text/JavaScript"> 
6.      //event 参数中有 data 属性，就是父窗口发送过来的数据
7.      window.addEventListener("message", function( event ) { 
8.          // 把父窗口发送过来的数据显示在子窗口中
9.        document.getElementById("content").innerHTML+=event.data+"<br/>"; 
10.      }, false ); 
11.  
12.  </script> 
13.  </head> 
14.  <body> 
15.      Web page from http://child.com:8080 
16.      <div id="content"></div> 
17.  </body> 
18.  </html>

图 2. 父窗口嵌入子窗口

图 3. 父窗口发送数据到子窗口

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索javascript
， 数据
， 对象
， 嵌入窗口
， 监听
， 窗口
， postmessage
， 时间转换跨域
， js跨域问题
， js跨域解决方案
， js跨域及解决方法
， 跨域通信
， js跨域方法
JavaScript子窗口
跨域请求解决方案、ajax跨域请求解决方案、如何解决跨域请求、解决跨域请求、cors跨域请求解决办法，以便于您获取更多的相关知识。