【转载】HTML5 Messaging

标签： HTML5 技术博文 HTML5学习资源 | 发表时间：2012-09-04 12:34 | 作者：HTML5研究小组
出处：http://www.mhtml5.com
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 }

 

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

相关 [html5 messaging] 推荐：

【转载】HTML5 Messaging

- - HTML5研究小组
HTML5 的Message API能够让HTML5页面之间传递消息，甚至这些页面可以不在同一样域名下. 为了让消息能从一个页面发送到另一个页面，主动发送消息的页面必须拥有另一个页面的窗口引用. 然后发送 页面针对接受页调用 postMessage() 方法. postMessage() 方法中 origin 参数的值必须与页面所在的iframe的域名相匹配.

Openfetion for ubuntu messaging menu开发手记

- 培培 - basic coder
自从ubuntu11.04发布之后Openfetion就遇到了一个比较麻烦的问题，把Openfetion飞信最小化到托盘之后就找不到了，没用过ubuntu11.04，不过据说它的unity桌面貌似没有status icon这回事，所以把Openfetion塞进Messaging Menu也成了一个很重要的任务，在这里把开发过程和大家分享.

Google Cloud Messaging for Android (GCM)已推出，将取代C2DM框架

- - InfoQ cn
Google已经发布了Google Cloud Messaging for Android，该服务对已被废弃的云到端消息框架(C2DM)做出改进，取而代之的服务无配额限制、无需注册，并提供了一套更丰富的全新接口. GCM提供了在应用服务器和Android设备之间引入代理的能力，以保障两者之间可伸缩的云通信.

HTML5 logo 发布

- Greyby - 酷壳 - CoolShell.cn
2011年1月19日，W3C发布了HTML5的log，打开W3C的页面，下在的图片印入眼前. 我的第一感觉，就像是看到了小时候看的八一电影制片产的电影. 这分明是号召全世界的无产Web程序员们团结起来，不畏艰难，不怕牺牲，一定要把HTML5的革命事业进行到底. 所以，请各位Web程序员不但在你们的HTML5的网页上加上下面的徽章（关于各个徽章的含义，请参看这里）.

html5 canvas入门

- - Marshal's Blog
可以把canvas看做div，不过，它的长和宽不能通过css来定义，要使用标签属性：. 或者javascript对象属性设置：. 使用canvas，只有一种操作方式，使用javascript. 获得canvas对象的上下文对象，该对象是操作canvas的主要对象：. 使用canvas画最简单的线， 点击运行示例，结果看起来是这样：.

HTML5新特性

- - CSDN博客推荐文章
 通过fillStyle和strokeStyle 属性可以轻松的设置矩形的填充和线条. 颜色值使用方法和CSS 一样：十六进制数、rgb()、rgba() 和 hsla. 通过 fillRect可以绘制带填充的矩形. 使用 strokeRect 可以绘制只有边框没有填充的矩形. 如果想清除部分 canvas可以使用clearRect.

Adobe、标准和HTML5 -HTML5 and CSS3 开发

- - HTML5研究小组
“[提供商之间的]最激烈的竞争将与 标准密切相关. 大部分聪明人的眼睛将紧盯着技术标准. 但在计算机行业，新标准既可能是无限财富的源泉，也可能导致企业帝国的毁灭. 尽管存在着如此多的风险，标准仍然点燃了无限激情”. —The Economist, 1993年2月23日. 在编写这段有关标准化的话时，计算领域的主要争议是Unix是否是一个可行的操作系统（以及是否为IBM、DEC和HP的更多专用操作系统带来了挑战），以及哪个视窗平台（SUN/AT&T还是IBM/DEC/HP）将成为标准.

HTML5漫谈（4）–HTML5应用平台:PhoneGAP

- - HTML5研究小组
(  程宝平 chengbp @gmail.com）. http://phonegap.com）按官方说法，是HTML5移动应用平台，它包括两部分：. 1)       应用开发框架：采用Web/HTML5技术编写应用，支持设备能力（如GPS、重力感应等）调用；支持能力插件灵活扩展. 图1 PhoneGAP支持设备能力API列表.

HTML5新特性之CSS+HTML5实例

- - CSDN博客Web前端推荐文章
1、新的DOCTYPE和字符集. HTML5的一项准则就是化繁为简，Web页面的DOCTYPE被极大的简化. HTML5引入了很多新的标签，根据内容和类型的不同，被分为7大类. 语义化标签可以简化HTML页面设计，并且将来搜索引擎在抓取和索引网页的时候，也会利用这些元素的优势. HTML5的宗旨之一就是存在即合理.

HTML5设计原理

- jessie - 蓝色理想
Jeremy Keith在 Fronteers 2010 上的主题演讲 下载PPT（PDF） 观看视频 今天我想跟大家谈一谈HTML5的设计. 主要分两个方面：一方面，当然了，就是HTML5. 我可以站在这儿只讲HTML5，但我并不打算这样做，因为如果你想了解HTML5的话，你可以Google，可以看书，甚至可以看规范.