1. 云栖社区>
  2. 技术文集>
  3. 列表>
  4. 正文

JS postMessage跨域请求解决方案

作者:用户 来源:互联网 时间:2016-01-15 12:59:53

javascript数据对象嵌入窗口监听窗口postmessage时间转换跨域js跨域问题js跨域解决方案js跨域及解决方法跨域通信js跨域方法JavaScript子窗口

JS postMessage跨域请求解决方案 - 摘要: 本文讲的是JS postMessage跨域请求解决方案,     今天看到一篇非常好的文章,忍不住想转载过来,亲自测试了一下,解决了web开发中我们经常遇到最头痛的跨域请求的问题。文章主要是介绍了HTML5 po

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 方法发送数据

html toolbar:false sh_html snippet-formatted sh_sourceCode">
  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. 父窗口嵌入子窗口

JS postMessage跨域请求解决方案-ajax跨域请求解决方案

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

JS postMessage跨域请求解决方案-如何解决跨域请求



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

消息-JS HTML5跨域跨窗口通信postMessage问题求帮助

...in); alert(event.data); alert(event.source); } 解决方案 你哪时注调用loadImg()这个放在注册onmessage事件的?不会是在body的onload事件中吧。。这样注册事件太晚了,你是打开窗口后就直接发信息了,你打开的窗口可能...

js中实现浏览器跨域访问解决方案

...方案 上一篇文章,我写了window.postMessage,是一种跨域的解决方案。今天再介绍几个。 CORS跨域资源共享 众所周知,我们之前跨域很多时候用的是jsonp的方式,jsonp的方式我后面介绍。下面说说CORS跨域和jsonp跨域的优势: CORS与JSONP...

详解js跨域问题

...久存在一个窗口载入过的所有页面中的 使用HTML5的window.postMessage方法跨域 window.postMessage(message,targetOrigin)方法是html5新引进的特性,可以使用它来向其它的window对象发送消息,无论这个window对象是属于同源或不同源,目前IE8+、Fire...

Web开发中跨域的几种解决方案

出于安全考虑,HTML的同源策略不允许JavaScript进行跨域操作,但随着Web App的功能越来越强 各种跨域的需求催生了无数的跨域手法。甚至在HTML5标准中都给出了官方的跨域方法, 也是最近应付面试的需要,拿一篇文章来总结既有...

跨域解决方案大全

什么是跨域 注:本文完整示例地址 先来说一个概念就是同源,同源指的是协议,端口,域名全部相同。 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功...

前三篇
后三篇
弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率

40+云计算产品,6个月免费体验

稳定可靠、可弹性伸缩的在线数据库服务,全球最受欢迎的开源数据库之一

云服务器9.9元/月,大学必备