HTML5的页面消息传输机制

HTML5 的Message API能够让HTML5页面之间传递消息，甚至这些页面可以不在同一样域名下。

成都创新互联公司坚持“要么做到，要么别承诺”的工作理念，服务领域包括：网站设计、做网站、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的纳溪网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！

发送消息

为了让消息能从一个页面发送到另一个页面，主动发送消息的页面必须拥有另一个页面的窗口引用。然后发送页面针对接受页调用 postMessage() 方法。

代码演示：

 
 
 
  
  
  var message = "Hello there";    
  
  var origin  = "http://www.oschina.net";    
  
     
  
  var theIframe = document.getElementById("theIframe");    
  
     
  
  theIframe.contentWindow.postMessage(message, origin);

postMessage() 方法中 origin 参数的值必须与页面所在的iframe的域名相匹配。否则将无法正常运行，这里你不需要整个页面的网址，而只需要主域名就够了，例如 http://localhost 或 http://www.oschina.net

接受消息

为了能接受消息，页面需要订阅好onmessage事件的处理方法，以下就是能在Firefox与Chrome上正常运行的代码：

 
 
 
  
  
  window.onmessage = function(event) {    
  
      document.getElementById("show").innerHTML =    
  
              "Message Received: " + event.data    
  
            + " from: " + event.origin;    
  
  }

以上代码设置好window的onmessage事件处理方法。然后在方法中找到id为"show"的html元素，然后设置此元素的innerHTML为"Message received: "与真正的message。

在IE9下必须以这种代码实现相同的功能。

 
 
 
  
  
  window.attachEvent("onmessage", function(event) {    
  
      document.getElementById("show").innerHTML =    
  
              "Message Received: " + event.data    
  
            + " from: " + event.origin;    
  
  }

建议你在JS中保持这两份代码，它们之间是没有冲突的。

事件对象将包含以下三个属性。

 
 
 
  
  
  data    
  
  origin    
  
  source

data属性包含包含发送页面发送过来的消息

origin属性包含发送页面的原始域名

source属性包含发送页面的window对象对应的引用。此window对象可以用来回复消息给原始的发送页面，只需要使用postMessage( )就行，如下就是代码：

 
 
 
  
  
  window.onmessage = function(event) {    
  
      event.source.postMessage(    
  
         "Thank you for the message",    
  
         event.origin    
  
      );    
  
  }

发送JSON

Messageing API只允许你发送字符串类型消息。如果你需要发送JavaScript对象，你将需要将此对象使用 JSON.stringify( ) 转换成JSON字符串，接受后使用 JSON.parse( ) 方法翻译成JavaScript对象。代码如下：

 
 
 
  
  
  var theObject = { property1 : "hello", property2 : "world" }    
  
  var message = JSON.stringify(theObject);    
  
  var origin  = "http://tutorials.jenkov.com";    
  
     
  
  var theIframe = document.getElementById("theIframe");    
  
     
  
  theIframe.contentWindow.postMessage(message, origin);

以下代码就是如何将JSON字符串转换成 JavaScript 对象。

 
 
 
  
  
  window.onmessage = function(event) {    
  
      var theObject = JSON.parse(event.data);    
  
  }

原文链接 , OSChina.NET 原创翻译

网页题目：HTML5的页面消息传输机制
转载注明：http://www.hantingmc.com/qtweb/news33/73783.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容