跨域訪問的解決方案（HTML5的方法：postMessage)

時間 2020-01-15

標籤訪問解決方案 html5 html 方法 postmessage 欄目 HTML5 简体版

原文原文鏈接

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

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

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

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

我如今的需求是，假定Domain1上咱們有個json數據，咱們想讓Domain2應用中的javascript要能夠操做這個json 數據（注意，這裏已是跨域了，由於Domain2上的js操做了Domain1上的數據），應該怎麼辦呢？跨域

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

Domain2的代碼:ide

首先，咱們在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 數據，而後顯示在頁面底部：post

  
  
  
  
   
   
   
   //這個函數用於處理從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）啓動起來，不出意外，它將是：spa

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()，能夠發現信息是徹底匹配的）