HTML5中页面消息传输机制的示例分析
这篇文章主要介绍HTML5中页面消息传输机制的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
创新互联建站专注为客户提供全方位的互联网综合服务,包含不限于网站建设、成都做网站、西陵网络推广、小程序制作、西陵网络营销、西陵企业策划、西陵品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等,从售前售中售后,我们都将竭诚为您服务,您的肯定,是我们最大的嘉奖;创新互联建站为所有大学生创业者提供西陵建站搭建服务,24小时服务热线:028-86922220,官方网址:www.cdcxhl.com
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); }
以上是“HTML5中页面消息传输机制的示例分析”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!
网站题目:HTML5中页面消息传输机制的示例分析
链接URL:http://myzitong.com/article/gohige.html