首页 关于我们建站流程新闻中心成功案例网站优化联系我们
您现在的位置: 北京网站建设_北京网站建设公司_北京做网站的公司_吴天工作室 >> 新闻中心 >> 建站须知 >> 正文
HTML5 Messaging
作者:佚名    新闻文章来源:本站原创    点击数:    更新时间:2013-8-9             ★★★   【字体:
HTML5 的Message API能够让HTML5页面之间传递消息,甚至这些页面可以不在同一样域名下。 发送消息 为了让消息能从一个页面发送到另一个页面,主动发送消息的页面必须拥有另一个页面的窗口引用。然后发送 页面针对接受页调用 postMessage() 方法。 代码演示:
HTML5 的Message API能够让HTML5页面之间传递消息,甚至这些页面可以不在同一样域名下。
 
发送消息
为了让消息能从一个页面发送到另一个页面,主动发送消息的页面必须拥有另一个页面的窗口引用。然后发送 页面针对接受页调用 postMessage() 方法。
代码演示:
1 var message = "Hello there";
 
2 var origin  = "http://www.oschina.net";
 
3  
 
4 var theIframe = document.getElementById("theIframe");
 
5  
 
6 theIframe.contentWindow.postMessage(message, origin);
 

 
postMessage() 方法中 origin 参数的值必须与页面所在的iframe的域名相匹配。否则将无法正常运行,这里 你不需要整个页面的网址,而只需要主域名就够了,例如 http://localhost 或 http://www.oschina.net
 
接受消息
为了能接受消息,页面需要订阅好onmessage事件的处理方法,以下就是能在Firefox与Chrome上正常运行的代 码:
1 window.onmessage = function(event) {
 
2     document.getElementById("show").innerHTML =
 
3             "Message Received: " + event.data
 
4           + " from: " + event.origin;
 
5 }
 

 
以上代码设置好window的onmessage事件处理方法。然后在方法中找到id为"show"的html元素,然后设置此元 素的innerHTML为"Message received: "与真正的message。
 
在IE9下必须以这种代码实现相同的功能。
1 window.attachEvent("onmessage", function(event) {
 
2     document.getElementById("show").innerHTML =
 
3             "Message Received: " + event.data
 
4           + " from: " + event.origin;
 
5 }
 

 
建议你在JS中保持这两份代码,它们之间是没有冲突的。
事件对象将包含以下三个属性。
1 data
 
2 origin
 
3 source
 
 
data属性包含包含发送页面发送过来的消息
origin属性包含发送页面的原始域名
source属性包含发送页面的window对象对应的引用。此window对象可以用来回复消息给原始的发送页面,只需 要使用postMessage( )就行,如下就是代码:
1 window.onmessage = function(event) {
 
2     event.source.postMessage(
 
3        "Thank you for the message",
 
4        event.origin
 
5     );
 
6 }
 

 
发送JSON
Messageing API只允许你发送字符串类型消息。如果你需要发送JavaScript对象,你将需要将此对象使用  JSON.stringify( ) 转换成JSON字符串,接受后使用 JSON.parse( ) 方法翻译成JavaScript对象。代码如下:
1 var theObject = { property1 : "hello", property2 : "world" }
 
2 var message = JSON.stringify(theObject);
 
3 var origin  = "http://tutorials.jenkov.com";
 
4  
 
5 var theIframe = document.getElementById("theIframe");
 
6  
 
7 theIframe.contentWindow.postMessage(message, origin);
 

 
以下代码就是如何将JSON字符串转换成 JavaScript 对象。
1 window.onmessage = function(event) {
 
2     var theObject = JSON.parse(event.data);
 
3 }
 



原文链接http://tutorials.jenkov.com/html5/messaging.html , OSChina.NET 原创翻译

新闻文章录入:admin    责任编辑:admin 
  • 上一个新闻文章:
  • 下一个新闻文章:
  • 发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口
    最新热点 最新推荐 相关文章
    北京网站建设哪家好? 
    五一去哪玩?北京网站建设温…
    子级Repeater中绑定父级Repe…
    IIS7.5 备份还原
    什么是W3C标准
    网站建设---浅谈依赖注入框架…
    IIS配置MVC网站
    Entity Framework连接数据库…
    旅游类网站二
    旅游类网站一
    网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)

    北京网站建设公司  北京市·海淀区 北京泰宇恒森商贸有限公司 版权所有 京ICP备05054621号 站点地图