html5的postmessage實現js前端跨域訪問及調用解決方案

關於跨域訪問，使用JSONP的方法，我前面已經demo過了，具體見http://supercharles888.blog.51cto.com/609344/856886，HTML5提供了一個非常強大的API，叫postMessage，它其實就是以前iframe的進化版本，使用起來極其方便，這裡舉個實驗例子：

我們依舊按照與上文相同的設定，假定我們有2個Domain

Domain1: http://localhost:8080 它上面有個應用叫HTMLDomain1，並且有個頁面叫sender.html。

Domain2:http://localhost:8180 它上面有個應用叫HTMLDomain2,並且有個頁面叫receiver.html。

我現在的需求是，假定Domain1上我們有個json資料，我們想讓Domain2應用中的javascript要可以操作這個json 資料（注意，這裡已經是跨域了，因為Domain2上的js操作了Domain1上的資料），應該怎麼辦呢？

解決方案就是用HTML5的postMessage方法

Domain2的代碼:

首先，我們在Domain2上建立一個HTML頁面，這個頁面沒什麼內容，就一行文字會來標識它是Domain 2,它下方將來會被js用來填充從Domain1弄過來的資料。

    Domain2上的接收者頁面receiver.html <script type="text/javascript" src="js/receiveInfo.js"></script>             
這個頁面是HTML5跨域訪問的Domain2上的頁面receiver.html，它會處理來自Domain1上sender.html發送的頁面
            

Domain2頁面載入時候，它會調用receiveInfoFromAnotherDomain()函數，這個函數首先定義了一個事件監聽函數，它只接受來自Domain1(http://localhost:8080)的事件，否則就忽略掉，然後它從這個事件中分離出資訊負載，也就是json 資料，然後顯示在頁面底部：

//這個函數用於處理從Domain1上的sender發送過來的資訊，然後將他們列印出來 function receiveInfoFromAnotherDomain(){              console.log("entering method receiveInfoFromAnotherDomain()");     //首先讓window添加一個事件監聽函數，表明它可以監聽視窗對象的message事件     //它受到事件時，會先判斷是否來自指定的Domain(不是所有Domain丟過來的事件它都處理的）     window.addEventListener("message",function(ev){         console.log("the receiver callback func has been invoked");                      //如果不是來自指定Domain的，則忽略         if(ev.origin !="http://localhost:8080"){             console.log("the event doesn't come from Domain1!");             return;         }                      //現在可以處理資料了         //控制台列印出接收到的json資料，因為我們把json字串發送了過來         console.log(ev.data);              //將json字串轉為json對象，然後從中分離出原始資訊         var personInfoJSON = JSON.parse(ev.data);         var name = personInfoJSON.name;         var title = personInfoJSON.title;         var info = personInfoJSON.info;                      //構造資訊文本並且顯示在頁面的底部         var personInfoString="從域為： "+ev.origin+"那裡傳來的資料."+"
";         personInfoString+="姓名是: "+name+"
";         personInfoString+="頭銜為：  "+title+"
";         personInfoString+="資訊為：  "+info+"
";         document.body.innerHTML=personInfoString;                              }                  );                     }

然後將Domain2 （http://localhost:8180）啟動起來，不出意外，它將是：

vc/ix7bU2kRvbWFpbjG1xHNlbmRlci5odG1s0rPD5tbQoaM8L3A+CjxwcmUgY2xhc3M9"brush:java;"> Domain1上的寄件者頁面sender.html <script type="text/javascript" src="js/sendInfo.js"></script>

這個頁面是HTML5跨域訪問的Domain1上的頁面sender.html，它將發送一些資訊到Domain2上的receiver.html

<iframe width="1200" src="http://localhost:8180/HTML5Domain2/receiver.html"></iframe>

同時我們在頁面上建立一個button，當點擊它就會發送json資料給Domain2.

所以js函數就負責以json字串形式發送json資料，然後讓iframe中的Domain2頁面發送資訊,注意這裡接受者的視窗在iframe中，所以我們用iframe.postMessage,第一個參數是我們的資訊載體，這裡是json字串，第二個參數是目標Domain，也就是Domain2

//假定這個Domain(Domain1)要把一些json資訊發送到另一個域（Domain2）的某個頁面 function sendInfoToAnotherDomain(){              console.log("entering method: sendInfoToAnotherDomain()");              //首先構造一個對象，內含有我們想要發送到Domain2的資訊，然後把它轉為json字串        var personInfo= new Object;     personInfo.name='charles';     personInfo.title="technical lead";     personInfo.info="talent man";     var str=JSON.stringify(personInfo);              console.log("The information to be send: "+str);              //我們把這個json字串發送到Domain2     //因為這個Domain2上的目標頁面被嵌在了首頁面上作為iframe，所以我們取得這個iframe然後讓他來發送資訊     //資訊的內容是我們的包含個人資訊內容的json字串     var iframe=window.frames[0];         iframe.postMessage(str,'http://localhost:8180');              console.log("json string has been sent to domain2 successfully"); }

這樣一來，我們就定義了寄件者（Domain1)和接收者(Domain2),寄件者由於嵌了<iframe>所以頁面看上去如：

當點擊"點擊則發送事件到Domain2" 按鈕後，json資料資訊被發送到了Domain2，因為Domain2的事件監聽程式註冊了監聽來自Domain1的事件，所以它可以把事件中攜帶的json字串解析成原始資訊，然後構造文本顯示在Domain2的receiver.html的下方，（可以比照sendInfoToAnotherDomain()，可以發現資訊是完全符合的）