注册 | 登陆
您的位置:阿里西西 > 前端技术 > 脚本技术 > 详细内容

JS postMessage跨域请求解决方案

  稿源:互联网   2016-01-15 02:52:25   点击:   撤稿纠错

以下讨论的是和相关的JS postMessage跨域请求解决方案 教程文章,内容是本站精心挑选整理的教程,希望对广大的网友给到帮助,下面是详细内容:

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.  
  2.   
  3.   http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  4.  </span>Test Cross-domain communication using HTML5<span class="sh_keyword" style="margin: 0px; padding: 0px; border: 0px; font-style: normal; font-variant: inherit; font-weight: bold; font-stretch: inherit; font-size: inherit; line-height: inherit; font-family: inherit; vertical-align: baseline; color: rgb(105, 105, 105);"> 
  5.   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.   
  15.   
  16.   
  17.       
  18.       src="http://child.com:8080/TestHTML5/other-domain.html" 
  19.                  id="otherPage"> 
  20.      

     
  21.       type="text" id="message"> type="button" 
  22.              value="Send to child.com" onclick="sendIt()" /> 
  23.   
  24.  

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

 

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

  1.  
  2.   
  3.   http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  4.  </span>Web page from child.com<span class="sh_keyword" style="margin: 0px; padding: 0px; border: 0px; font-style: normal; font-variant: inherit; font-weight: bold; font-stretch: inherit; font-size: inherit; line-height: inherit; font-family: inherit; vertical-align: baseline; color: rgb(105, 105, 105);"> 
  5.   type="text/JavaScript"> 
  6.      //event 参数中有 data 属性,就是父窗口发送过来的数据
  7.      window.addEventListener("message", function( event ) { 
  8.          // 把父窗口发送过来的数据显示在子窗口中
  9.        document.getElementById("content").innerHTML+=event.data+"
    "; 
  10.      }, false ); 
  11.  
  12.   
  13.   
  14.   
  15.      Web page from http://child.com:8080 
  16.       id="content">
 
  •   
  •  
  • 图 2. 父窗口嵌入子窗口

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


    关于JS postMessage跨域请求解决方案的内容写到这里就结束啦,您可以收藏本页网址http://www.alixixi.com/web/ a/2016011595626.shtml方便下次再访问哦。


    文章分类LIST >>返回首页