標籤：java 前端 html5 jsonp 跨域
關於跨域訪問，使用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弄過來的資料。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Domain2上的接收者頁面receiver.html</title> <script type="text/javascript" src="js/receiveInfo.js"></script> </head> <body onload="receiveInfoFromAnotherDomain();"> <p>這個頁面是HTML5跨域訪問的Domain2上的頁面receiver.html，它會處理來自Domain1上sender.html發送的頁面</p> </body> </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+"那裡傳來的資料."+"<br>"; personInfoString+="姓名是: "+name+"<br>"; personInfoString+="頭銜為： "+title+"<br>"; personInfoString+="資訊為： "+info+"<br>"; document.body.innerHTML=personInfoString; } ); }
然後將Domain2 （http://localhost:8180）啟動起來，不出意外，它將是：
Domain1的代碼：
現在，我們來構建Domain1:
為了讓Domain1能夠和Domain2通過事件互動，我們用了iframe,把Domain2的頁面receiver.html以<iframe>形式鑲嵌在Domain1的sender.html頁面中。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Domain1上的寄件者頁面sender.html</title> <script type="text/javascript" src="js/sendInfo.js"></script> </head> <body> <p>這個頁面是HTML5跨域訪問的Domain1上的頁面sender.html，它將發送一些資訊到Domain2上的receiver.html</p> <input type="button" value="點擊則發送事件到Domain2" onclick="sendInfoToAnotherDomain();"/> <!-- 這個iframe包含了在另外一個domain->Domain2(http://localhost:8180)的接收者頁面receiver.html --><iframe width="1200" src="http://localhost:8180/HTML5Domain2/receiver.html"></iframe> </body> </html>
同時我們在頁面上建立一個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()，可以發現資訊是完全符合的）
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
