HTML5：使用postMessage实现Ajax跨域请求

Bertha 。 2021-12-10 14:19 287阅读 0赞

### HTML5：使用postMessage实现Ajax跨域请求 ###

由于同源策略的限制，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跨域通信。  
  
假设有结构如下：  
  
test.html

Js代码 ![收藏代码][icon_star.png]

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

iframe.html

Js代码 ![收藏代码][icon_star.png]

1.  <strong>iframe指向xiebiji.com</strong>
2.  <form>
3.  <p>
4.  <label for="message">给父窗口发个信息：</label> 
5.  <input type="text" name="message" value="dad" id="message" /> 
6.  <input type="submit" /> 
7.  </p>
8.  </form>
9.  <p id="test">暂无信息。</p>

下面是test.html里的Javascript代码（发送数据）：

Js代码 ![收藏代码][icon_star.png]

1.  var win = document.getElementById("iframe").contentWindow; 
2.  document.querySelector('form').οnsubmit=function(e)\{ 
3.  win.postMessage(document.getElementById("message").value,"\*"); 
4.  if (e.preventDefault) 
5.  e.preventDefault();
6.  e.returnValue = false; 
7.  \}

关键代码就一句：  
  
win.postMessage(document.getElementById("message").value,"\*");  
  
　　postMessage是通信对象的一个方法，所以向iframe通信，就是iframe对象调用postMessage方法。 postMessage有两个参数，缺一不可。第一个参数是要传递的数据，第二个参数是允许通信的域，“\*”代表不对访问的域进行判断，可理解为允许所有 域的通信。  
  
　　然后是iframe.html里侦听接收数据的代码：

Js代码 ![收藏代码][icon_star.png]

1.  var parentwin = window.parent; 
2.  window.onmessage=function(e)\{ 
3.  document.getElementById("test").innerHTML = e.origin + "say:" + e.data; 
4.  parentwin.postMessage('HI!你给我发了"<span>'+e.data+'"</span>。',"\*"); 
5.  \};

很简单，相信一看就懂了。e.data包含传送过来的数据，e.origin指代源域。  
  
然后iframe.html也给test.html发送回应的数据，test.html接收数据。代码雷同，就不贴代码了。  
  
2. Ajax跨域请求  
  
基于以上的跨域通信，只要将Ajax代码放在iframe.html里的onmessage处理函数里头，将test.html用 postMessage传过来的数据作为参数发送请求，再将返回的数据用postMessage传给test.html。这样就实现了跨域的Ajax请 求。其实是很简单的东西。  
  
贴个示例代码吧，但跟以上的代码无关。

Js代码 ![收藏代码][icon_star.png]

1.  1.  (function()\{ 
    2.  //获取跨域数据 
    3.  window.onmessage = function(e)\{ 
    4.  var url = "http://yangzebo.com/demo/noforget/test.php?msg=" + e.data; 
    5.  //Ajax 
    6.  var xhr = getXHR(); 
    7.  if(xhr)\{ 
    8.  xhr.open("GET",url,true); 
    9.  xhr.onreadystatechange = changeHandle;
    10. xhr.send(null); 
    11. \}else\{ 
    12. alert("不支持Ajax"); 
    13. \}
    14. function changeHandle()\{ //返回处理 
    15. if(xhr.readyState == 4)\{ 
    16. var parentwin = window.parent; 
    17. parentwin.postMessage(xhr.responseText,"\*");//跨域发送数据 
    18. \}
    19. \}
    20. function getXHR()\{ //获取XMLHttpRequest 
    21. var xhr\_temp; 
    22. if(window.XMLHttpRequest)\{ 
    23. xhr\_temp = new XMLHttpRequest(); 
    24. \}else if(window.ActiveXObject)\{ 
    25. xhr\_temp = new ActiveXObject("Microsoft.XMLHTTP"); 
    26. \}else\{ 
    27. xhr\_temp = null; 
    28. \}
    29. return xhr\_temp; 
    30. \}
    31. \};
    32. \})();
    33. 一看就懂，就特记录下来以供学习
    34. 原文见：[http://wangdf-jee.iteye.com/blog/1404272][http_wangdf-jee.iteye.com_blog_1404272]

转载于:https://www.cnblogs.com/xwwin/p/4090923.html

[icon_star.png]: /images/20211210/5177900026c04b6687081935c27f091e.png
[http_wangdf-jee.iteye.com_blog_1404272]: http://wangdf-jee.iteye.com/blog/1404272