HTML5 Messaging

junwong 发布于 2012/09/03 17:26
阅读 4K+
收藏 74
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 原创翻译
加载中
0
Neeke
Neeke
学习了
0
mallon
mallon
哪些浏览器支持呢?
0
童学芬
童学芬
这个功能还不错,不过应该用得很少的。有哪个用户会喜欢使用多窗口页面的网站呢?
0
Lunar_Lin
Lunar_Lin

引用来自“童学芬”的答案

这个功能还不错,不过应该用得很少的。有哪个用户会喜欢使用多窗口页面的网站呢?
有时候同一个网站的页面,用户会开很多个页面,你打开某个人的主页,又希望在一个新的页面里读读他的博文,如果有删除/更新性质的操作,这些页面就需要保持一致。
0
Jiazz
Jiazz

引用来自“童学芬”的答案

这个功能还不错,不过应该用得很少的。有哪个用户会喜欢使用多窗口页面的网站呢?
我个人找资料的时候喜欢多窗口(同一网站下)
0
猫小
猫小
跨域操作,安全性有保障么?
逝水fox
逝水fox
支持跨域,正常使用的情况,接收方必须检查event.origin是否是有效的消息源。这个值由浏览器填写(不是发送的时候参数指定的那个origin)。
童学芬
童学芬
应该不能跨域吧。浏览器不可能去支持跨域
0
唐辉
学习了 !!!
0
frankiegao123
frankiegao123
Cross-document messaging
http://www.whatwg.org/specs/web-apps/current-work/multipage/web-messaging.html#crossDocumentMessages
现在的浏览器都支持了
IE 8+
http://msdn.microsoft.com/en-us/library/ie/cc197015%28v=vs.85%29.aspx
Firefox 6+
https://developer.mozilla.org/en-US/docs/DOM/window.postMessage
Opera
http://dev.opera.com/articles/view/window-postmessage-messagechannel/
返回顶部
顶部