HTML5中使用postMessage实现Ajax跨域请求的方法


Posted in HTML / CSS onApril 19, 2016

由于同源策略的限制,Javascript存在跨域通信的问题,典型的跨域问题有iframe与父级的通信等。
 
常规的几种解决方法:

(1) document.domain+iframe;
(2) 动态创建script;
(3) iframe+location.hash;
(4) flash。
 
这里不细说这几种方法,记录的是HTML5的window.postMessage。
postMessage兼容IE8+、Firefox、Opera、Safari、Chrome。
 
需要两个异域的服务器来做测试,当然也可以用本地和线上服务器作为两个异域的服务器。
假如使用phonegap开发,就可以将请求文件安装在客户端,然后动态请求服务器的数据处理,获得并显示数据。这样就可以用任意Web开发语言及方法来开发phonegap App所需的后台。
 
1.  postMessage的用法
 
postMessage是HTML5为解决js跨域问题而引入的新的API,允许多个iframe/window跨域通信。
 
假设有结构如下:

JavaScript Code复制内容到剪贴板
  1. test.html<section id="wrapper">    
  2. <header>      
  3. <h1>postMessage (跨域)</h1>     
  4. </header>    
  5. <article>       
  6. <form>         
  7. <p>           
  8. <label for="message">给iframe发一个信息:   
  9. </label>          
  10. <input type="text" name="message" value="son" id="message"/>          
  11. <input type="submit"/>         
  12. </p>       
  13. </form>       
  14. <h4>目标iframe传来的信息:</h4>       
  15. <p id="test">暂无信息</p>       
  16. <iframe id="iframe"       
  17. src="http://xiebiji.com/works/postmessage/iframe.html">   
  18. </iframe>     
  19. </article>   
  20. </section>  

iframe.html

JavaScript Code复制内容到剪贴板
  1. <strong>iframe指向xiebiji.com</strong><form>  <p>      
  2. <label for="message">给父窗口发个信息:</label>       
  3. <input type="text" name="message" value="dad" id="message"/>       
  4. <input type="submit"/>  </p></form>   
  5. <p id="test">暂无信息。</p>下面是test.html里的Javascript代码(发送数据):var win = document.getElementById("iframe").contentWindow;document.querySelector('form').onsubmit=function(e){    
  6. win.postMessage(document.getElementById("message").value,"*");     
  7. if (e.preventDefault)      
  8. e.preventDefault();     
  9. e.returnValue = false;   
  10. }   

关键代码就一句:

JavaScript Code复制内容到剪贴板
  1. win.postMessage(document.getElementById("message").value,"*");   

postMessage是通信对象的一个方法,所以向iframe通信,就是iframe对象调用postMessage方法。postMessage有两个参数,缺一不可。第一个参数是要传递的数据,第二个参数是允许通信的域,“*”代表不对访问的域进行判断,可理解为允许所有域的通信。
 

然后是iframe.html里侦听接收数据的代码:

JavaScript Code复制内容到剪贴板
  1. var parentwin = window.parent;window.onmessage=function(e){     
  2. document.getElementById("test").innerHTML = e.origin + "say:" + e.data;     
  3. parentwin.postMessage('HI!你给我发了"<span>'+e.data+'"</span>。',"*");};  

很简单,相信一看就懂了。e.data包含传送过来的数据,e.origin指代源域。
 
然后iframe.html也给test.html发送回应的数据,test.html接收数据。代码雷同,就不贴代码了。

2. Ajax跨域请求
 
基于以上的跨域通信,只要将Ajax代码放在iframe.html里的onmessage处理函数里头,将test.html用postMessage传过来的数据作为参数发送请求,再将返回的数据用postMessage传给test.html。这样就实现了跨域的Ajax请求。其实是很简单的东西。
 
贴个示例代码吧,但跟以上的代码无关。

JavaScript Code复制内容到剪贴板
  1. (function(){  //获取跨域数据  window.onmessage = function(e){ 
  2.    var url = "http://yangzebo.com/demo/noforget/test.php?msg=" + e.data;    
  3. //Ajax    var xhr = getXHR();   
  4.  if(xhr){  
  5.     xhr.open("GET",url,true);     
  6.  xhr.onreadystatechange = changeHandle;      
  7. xhr.send(null);    }else{   
  8.   alert("不支持Ajax");    }   
  9.  function changeHandle(){//返回处理    
  10.   if(xhr.readyState == 4){       
  11.  var parentwin = window.parent;      
  12.   parentwin.postMessage(xhr.responseText,"*");//跨域发送数据      
  13. }    } 
  14.    function getXHR(){//获取XMLHttpRequest     
  15.  var xhr_temp;      if(window.XMLHttpRequest){      
  16.   xhr_temp = new XMLHttpRequest();    
  17.   }else if(window.ActiveXObject){        
  18. xhr_temp = new ActiveXObject("Microsoft.XMLHTTP");   
  19.    }else{      
  20.   xhr_temp = null;    
  21.   }    
  22.   return xhr_temp;   
  23.  }  };})();   

然后给个不好看的Demo。
 
有兴趣代码请求啥的自个用开发人员工具看吧,“zebo男”是从数据库读出来的,“my msg”是sendAndReceive.html发给test.php的Ajax请求的参数,通过test.php和iframeforAjax.html回传到sendAndReceive.html。
 
3. 提示
 
要获取iframe的contentWindow才能调用postMessage。
 
postMessage一定要在iframe加载完成之后调用才可以正常运行。(这个耗了我好长时间)

HTML / CSS 相关文章推荐
css3背景_动力节点Java学院整理
Jul 11 HTML / CSS
利用CSS3实现动态的二级三级菜单效果实例源码
Jan 04 HTML / CSS
CSS3 icon font完全指南(CSS3 font 会取代icon图标)
Jan 06 HTML / CSS
CSS3圆角边框和边界图片效果实例
Jul 01 HTML / CSS
CSS 说明横向进度条最后显示文字的实现代码
Nov 10 HTML / CSS
HTML5边玩边学(2)基础绘图实现方法
Sep 21 HTML / CSS
HTML5 的新的表单元素(datalist/keygen/output)使用介绍
Jul 19 HTML / CSS
HTML5实现页面切换激活的PageVisibility API使用初探
May 13 HTML / CSS
HTML5 canvas 瀑布流文字效果的示例代码
Jan 31 HTML / CSS
HTML利用九宫格原理进行网页布局
Mar 13 HTML / CSS
html5中使用hotcss.js实现手机端自适配的方法
Apr 23 HTML / CSS
css实现文章分割线样式的多种方法总结
Apr 21 HTML / CSS
HTML5的Geolocation地理位置定位API使用教程
May 12 #HTML / CSS
HTML5的video标签的浏览器兼容性增强方案分享
May 19 #HTML / CSS
HTML5中的postMessage API基本使用教程
May 20 #HTML / CSS
浅谈HTML5 defer和async的区别
Jun 07 #HTML / CSS
Html5上传图片 移动端、PC端通用代码
Jun 08 #HTML / CSS
你不知道的5个HTML5新功能
Jun 28 #HTML / CSS
HTML5里autofocus自动聚焦属性使用介绍
Jun 22 #HTML / CSS
You might like
php检测数组长度函数sizeof与count用法
2014/11/17 PHP
WampServer下安装多个版本的PHP、mysql、apache图文教程
2015/01/07 PHP
php解析http获取的json字符串变量总是空白null
2015/03/02 PHP
ubuntu下配置nginx+php+mysql详解
2015/09/10 PHP
php mysql like 实现多关键词搜索的方法
2016/10/29 PHP
PHP操作MySQL中BLOB字段的方法示例【存储文本与图片】
2017/09/15 PHP
PDO::setAttribute讲解
2019/01/29 PHP
关于Blog顶部的滚动导航条代码
2006/09/25 Javascript
学习YUI.Ext 第七天--关于View&amp;JSONView
2007/03/10 Javascript
2007/12/23更新创意无限,简单实用(javascript log)
2007/12/24 Javascript
Javascript中this的用法详解
2014/09/22 Javascript
js鼠标单击和双击事件冲突问题的快速解决方法
2016/07/11 Javascript
angular中ui calendar的一些使用心得(推荐)
2017/11/03 Javascript
浅谈react 同构之样式直出
2017/11/07 Javascript
微信小程序CSS3动画下拉菜单效果
2018/11/04 Javascript
javascript实现简易聊天室
2019/07/12 Javascript
[01:15:56]2018DOTA2亚洲邀请赛3月30日 小组赛A组 TNC VS Newbee
2018/03/31 DOTA
Python常用随机数与随机字符串方法实例
2015/04/09 Python
介绍Python中内置的itertools模块
2015/04/29 Python
用Python编写web API的教程
2015/04/30 Python
Python简单获取网卡名称及其IP地址的方法【基于psutil模块】
2018/05/24 Python
python使用pandas处理excel文件转为csv文件的方法示例
2019/07/18 Python
通俗讲解python 装饰器
2020/09/07 Python
python图片合成的示例
2020/11/09 Python
CSS3 flex布局之快速实现BorderLayout布局
2015/12/03 HTML / CSS
THE OUTNET美国官网:国际设计师品牌折扣网站
2017/03/07 全球购物
波兰家居饰品和厨房配件网上商店:Maleomi
2020/12/15 全球购物
项目经理岗位职责
2013/11/11 职场文书
研究生求职自荐书
2014/06/23 职场文书
2014乡镇干部纪律作风整顿思想汇报
2014/09/13 职场文书
2015欢度元旦标语口号
2014/12/09 职场文书
民事起诉书范本
2015/05/19 职场文书
阳光体育运动标语口号
2015/12/26 职场文书
创业计划书之旅游网站
2019/09/06 职场文书
Go各时间字符串使用解析
2021/04/02 Golang
使用pandas生成/读取csv文件的方法实例
2021/07/09 Python