HTML5中使用postMessage實作Ajax跨網域請求的方法_html5教學技巧

由於同源策略的限制，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
   "wrapper">    
>    
3.       

4. postMessage (跨域)

        
5.     
6.        
7.          

8.             for="message"

9. >給iframe發送一個訊息：   >           
10. "text" name="message" value"message" value "son" id="message"
/>          
11. "submit"
/>         
       
       

目標iframe傳來的資訊：

       

15. "test"

>暫無資訊       
       
17. src="http://xiebiji.com/works/postmessage/iframe.html"
>   
     
  
20. 
      

iframe.html

JavaScript Code

複製內容到剪貼簿

1. iframe指向xiebiji.com
     

         

2. for="message">給父窗口發個訊息： 🎜>
3. "text" name="message" value"message" value "dad" id="message"/>       
4. "submit"/>     

5. "test">暫無訊息。

   下面是test.html裡的Javascript程式碼（傳送資料）：var win = document.getElementById("iframe").contentWindow;document.querySelector('form').onsubmit=function(e){ win.postMessage(document.getElementById(
6. "message").value,"*");
7. if (e.preventDefault)      
e.preventDefault();     
e.returnValue = 
9. false;   
}   

　　關鍵程式碼就一句：

JavaScript Code

複製內容到剪貼簿

1. win.postMessage(document.getElementById("message").value,"* >);   
　　postMessage是通訊物件的一個方法，所以向iframe通信，就是iframe物件呼叫postMessage方法。 postMessage有兩個參數，缺一不可。第一個參數是要傳遞的數據，第二個參數是允許通訊的域，「*」代表不對存取的域進行判斷，可理解為允許所有域的通訊。

 

　　接著是iframe.html裡偵聽接收資料的代碼：

JavaScript Code

複製內容到剪貼簿

var

1.  parentwin = window.parent;window.onmessage=function document.getElementById("test").innerHTML = e.origin   
"say:" parentwin.postMessage('HI!你寄了給我"' e.data '" 。

2. 　　很簡單，相信一看就懂了。 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.onmess 
   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.  }  };})();   

   次に、見苦しいデモを行います。
   
   コードリクエストに興味がある場合は、開発者ツールを使用して確認してください。「zebo man」はデータベースから読み取られ、「my msg」はsendAndReceiveによって送信されるAjaxリクエストのパラメータです。 .html から test.php に変換され、test.php および iframeforAjax.html を通じて sendAndReceive.html に戻されます。
   
   3. ヒント
   
   postMessage を呼び出すには、iframe の contentWindow を取得する必要があります。
   
   postMessage を正常に実行するには、iframe がロードされた後に呼び出す必要があります。 (かなり時間がかかりました)