天天看点
返回

跨域访问的解决方案（HTML5的方法：postMessage)

 关于跨域访问，使用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弄过来的数据。

     
  1.  <!DOCTYPE html>        
    2.       
  2.  <html>        
    3.       
  3.  <head>        
    4.       
  4.  <meta charset="UTF-8">        
    5.       
  5.  <title>Domain2上的接收者页面receiver.html</title>        
    6.       
  6.  <script type="text/javascript" src="js/receiveInfo.js"></script>        
    7.       
  7.  </head>        
    8.       
  8.  <body onload="receiveInfoFromAnotherDomain();">        
    9.               
  9.  <p>这个页面是HTML5跨域访问的Domain2上的页面receiver.html，它会处理来自Domain1上sender.html发送的页面</p>        
    10.               
  10.  </body>        
    11.       
  11.  </html>        
    12.

Domain2页面加载时候，它会调用receiveInfoFromAnotherDomain()函数，这个函数首先定义了一个事件监听函数，它只接受来自Domain1(http://localhost:8080)的事件，否则就忽略掉，然后它从这个事件中分离出信息负载，也就是json 数据，然后显示在页面底部：

     
  1.  //这个函数用于处理从Domain1上的sender发送过来的信息，然后将他们打印出来        
    2.       
  2.  function receiveInfoFromAnotherDomain(){        
    3.           
  3.      console.log("entering method receiveInfoFromAnotherDomain()");        
    4.       
  4.      //首先让window添加一个事件监听函数，表明它可以监听窗口对象的message事件        
    5.       
  5.      //它受到事件时，会先判断是否来自指定的Domain(不是所有Domain丢过来的事件它都处理的）        
    6.       
  6.      window.addEventListener("message",function(ev){        
    7.       
  7.          console.log("the receiver callback func has been invoked");        
    8.           
  8.          //如果不是来自指定Domain的，则忽略        
    9.       
  9.          if(ev.origin !="http://localhost:8080"){        
    10.       
  10.              console.log("the event doesn't come from Domain1!");        
    11.       
  11.              return;        
    12.       
  12.          }        
    13.           
  13.          //现在可以处理数据了        
    14.       
  14.          //控制台打印出接收到的json数据，因为我们把json字符串发送了过来        
    15.       
  15.          console.log(ev.data);        
    16.           
  16.          //将json字符串转为json对象，然后从中分离出原始信息        
    17.       
  17.          var personInfoJSON = JSON.parse(ev.data);        
    18.       
  18.          var name = personInfoJSON.name;        
    19.       
  19.          var title = personInfoJSON.title;        
    20.       
  20.          var info = personInfoJSON.info;        
    21.           
  21.          //构造信息文本并且显示在页面的底部        
    22.       
  22.          var personInfoString="从域为： "+ev.origin+"那里传来的数据."+"<br>";        
    23.       
  23.          personInfoString+="姓名是: "+name+"<br>";        
    24.       
  24.          personInfoString+="头衔为：  "+title+"<br>";        
    25.       
  25.          personInfoString+="信息为：  "+info+"<br>";        
    26.       
  26.          document.body.innerHTML=personInfoString;        
    27.           
  27.          }        
    28.           
  28.      );        
    29.                       
  29.  }        
    30.

然后将Domain2 （http://localhost:8180）启动起来，不出意外，它将是：

跨域访问的解决方案（HTML5的方法：postMessage)

Domain1的代码：

现在，我们来构建Domain1:

为了让Domain1能够和Domain2通过事件交互，我们用了iframe,把Domain2的页面receiver.html以<iframe>形式镶嵌在Domain1的sender.html页面中。

     
  1.  <!DOCTYPE html>        
    2.       
  2.  <html>        
    3.       
  3.  <head>        
    4.       
  4.  <meta charset="UTF-8">        
    5.       
  5.  <title>Domain1上的发送者页面sender.html</title>        
    6.       
  6.  <script type="text/javascript" src="js/sendInfo.js"></script>        
    7.       
  7.  </head>        
    8.       
  8.  <body>        
    9.           
  9.  <p>这个页面是HTML5跨域访问的Domain1上的页面sender.html，它将发送一些信息到Domain2上的receiver.html</p>        
    10.       
  10.  <input type="button" value="点击则发送事件到Domain2" onclick="sendInfoToAnotherDomain();"/>        
    11.           
  11.  <!-- 这个iframe包含了在另外一个domain->Domain2(http://localhost:8180)的接收者页面receiver.html -->        
    12.       
  12.  <iframe width="1200" src="http://localhost:8180/HTML5Domain2/receiver.html"></iframe>        
    13.       
  13.  </body>        
    14.       
  14.  </html>        
    15.

同时我们在页面上创建一个button，当点击它就会发送json数据给Domain2.

所以js函数就负责以json字符串形式发送json数据，然后让iframe中的Domain2页面发送信息,注意这里接受者的窗口在iframe中，所以我们用iframe.postMessage,第一个参数是我们的信息载体，这里是json字符串，第二个参数是目标Domain，也就是Domain2

     
  1.  //假定这个Domain(Domain1)要把一些json信息发送到另一个域（Domain2）的某个页面        
    2.       
  2.  function sendInfoToAnotherDomain(){        
    3.           
  3.      console.log("entering method: sendInfoToAnotherDomain()");        
    4.           
  4.      //首先构造一个对象，内含有我们想要发送到Domain2的信息，然后把它转为json字符串           
    5.       
  5.      var personInfo= new Object;        
    6.       
  6.      personInfo.name='charles';        
    7.       
  7.      personInfo.title='technical lead';        
    8.       
  8.      personInfo.info="talent man";        
    9.       
  9.      var str=JSON.stringify(personInfo);        
    10.           
  10.      console.log("The information to be send: "+str);        
    11.           
  11.      //我们把这个json字符串发送到Domain2        
    12.       
  12.      //因为这个Domain2上的目标页面被嵌在了主页面上作为iframe，所以我们取得这个iframe然后让他来发送信息        
    13.       
  13.      //信息的内容是我们的包含个人信息内容的json字符串        
    14.       
  14.      var iframe=window.frames[0];            
    15.       
  15.      iframe.postMessage(str,'http://localhost:8180');        
    16.           
  16.      console.log("json string has been sent to domain2 successfully");        
    17.       
  17.  }        
    18.

这样一来，我们就定义了发送者（Domain1)和接收者(Domain2),发送者由于嵌了<iframe>所以页面看上去如下图：

跨域访问的解决方案（HTML5的方法：postMessage)
跨域访问 html5 postMessage 同源策略
上一篇: 网络常见的 9 大命令，非常实用！
下一篇: C 练习实例14 - 将一个正整数分解质因数

继续阅读