跨域访问的解决方案（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()，能够发现信息是彻底匹配的）