文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

HTML5中页面消息传输机制的示例分析

2024-04-02 19:55

关注

这篇文章主要介绍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);  }

以上是“HTML5中页面消息传输机制的示例分析”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注编程网行业资讯频道!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯