• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > HTML5实战与剖析之跨文档消息传递(iframe传递信息)

HTML5实战与剖析之跨文档消息传递(iframe传递信息)

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含HTML5,实战与剖析,跨文档等相关知识,匿名希望在学习及工作中可以帮助到您
  在来自不同域名的页面间传递消息一般统称为跨文档消息传送,简称XDM。如,www.leemagnum.com域中的页面与位于一个内嵌框架中的http:///域名中的页面通信。在XDM机制出现之前,要毫无压力地实现这种通信需要用很长时间。XDM把这种机制规范化,让咱们能够既稳妥又简单地实现跨文档通信。

  XDM的核心是postMessage()方法。对于XDM而言,”另一个地方”指的是包含在当前页面中的iframe标签,或者有当前页面弹出的窗口。

  postMessage()方法接收两个参数:一条消息和一个表示消息接受来自哪个域名的字符串。第二个参数对保障安全通信非常重要,可以防止浏览器把消息发送到不安全的地方。小例子如下

  HTML代码

<iframe id="iframe" src="http://blog.csdn.net/lee_magnum" frameborder="0"></iframe>

  JavaScript代码

//获取框架中的window
var iframeWin = document.getElementById("iframe").contentWindow;
alert(iframeWin) // [object window]

//向框架中发送消息
iframeWin.postMessage("一个消息", "http://blog.csdn.net/lee_magnum")

  JavaScript代码中的最后一行代码尝试向内嵌框架中发送一条消息,并制定框架中的文档必须来源于”http:///”域。如果来源匹配,消息会传递到内嵌框架中,否则,postMessage()什么也不做。这一限制可以避免窗口中的位置在一些情况下发生改变。如果传给postMessage()的第二个参数是”*”,则表示可以把消息发送给来自任何域的文档。

  接收到XDM消息的时候,会触发window对象的message事件。这个事件是以异步形式触发的,所以从发送消息到接收消息(触发接收窗口的message事件)可能要经过一段事件的延迟。触发message事件后,传递给onmessage处理程序的事件对象包含以下三方面的重要信息。

  data:作为postMessage()方法第一个参数传入的字符串数据

  origin:发送消息的文档所在的域,如”http:///”

  source:发送消息的文档的window对象的代理。这个代理对象主要用于在发送上一条消息的窗口中调用postMessage()方法。如果发送消息的窗口来自同一个域名,那么这个对象就是window。

  接收到消息后验证发送窗口的来源是非常有必要的。就像给postMessage()方法指定第二个参数,来确保浏览器不会把消息发送给未知页面一样,在onmessage()方法处理程序中检测消息来源可以确保传入的消息来自已知的页面。基本的检测模式如下

  JavaScript代码

window.addEventListener('message',function(event){
	//确保发送消息的域名是已知的域名
	if(event.origin == "http://blog.csdn.net/lee_magnum"){
		//处理接收到的数据
		processMessage(event.data);
		//可选:向来源窗口发送回执
		event.source.postMessage("收到了", "http://www.leemagnum.com");
	}
}, false);

  Event.Source大多数情况下只是window对象的代理,不是实际的window对象。也就是说不能通过这个event.Source代理对象访问window对象的其他任何信息。只能通过event.Source代理调用postMessage()方法。

  XDM还有一个奇怪之处。首先,postMessage()的第一个参数最早是作为”永远都是字符串”来实现的。但后来这个参数的定义改了,改成允许传入任何数据结构。但是并非所有浏览器都实现了这个变化。所以保险起见,使用postMessage()方法的时候,最好只传字符串。如果你想传入结构化的数据,最好选择先在要传入的数据上调用JSON.stringify(),通过postMessage()方法传入得到的字符串,然后再在onmessage事件处理程序中调用JSON.parse()方法。

  支持XDM的浏览器有Opera、IE8+、Safari 4+、Firefox 3.5+、Chrome、Android版Webkit和iOS版Safari。更多有关XDM的小东东可以去XDM官方页面去学习参考。XDM的官方页面是http:///

  HTML5实战与剖析之跨文档消息传递(iframe传递信息)的相关知识就为大家介绍到这里了,更多相关内容请关注微课江湖()!

您可能想查找下面的文章:

  • HTML5知识点总结
  • HTML5的本地存储
  • HTML5本地存储之IndexedDB
  • Html5实现文件异步上传功能
  • Html5新标签datalist实现输入框与后台数据库数据的动态匹配
  • 详解HTML5 window.postMessage与跨域
  • HTML5拖放API实现拖放排序的实例代码
  • 解决html5中video标签无法播放mp4问题的办法
  • HTML5新特性 多线程(Worker SharedWorker)
  • Html5新增标签有哪些

相关文章

  • 2018-12-03利用HTML5画出一个坦克的形状具体实现代码_html5教程技巧
  • 2018-12-03使用HTML5 Canvas为图片填充颜色和纹理的教程_html5教程技巧
  • 2017-08-06HTML5边玩边学(2)基础绘图实现方法
  • 2018-12-03原生js 有没有 手机移动端 滑动 的事件?
  • 2018-12-03canvas游戏开发学习之五:运用样式与颜色(一)
  • 2018-12-03深入解析HTML5中的Blob对象的使用_html5教程技巧
  • 2018-12-03HTML5 VideoAPI,打造自己的Web视频播放器
  • 2018-12-03【水果忍者】血日狂刀代码-_-#真的只有一把刀
  • 2018-12-03Web App 开发使用哪种框架比较好?
  • 2018-12-03SVG(可缩放矢量图形)虚线相关属性与线条动画原理:一条会动的线

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • HTML5每日一练之OL列表的改良
    • HTML5 Canvas 绘图——使用 Canvas 绘制图形图文教程 使用html5 canvas 绘制精美的图_html5教程技巧
    • 如何使用phonegap获取位置信息的实现方法
    • HTML5梦幻之旅——炫丽的流星雨效果实现过程
    • H5拖放API进行拖放排序
    • html5中的一些标签学习(心得)
    • 如何解决layer弹出层中H5播放器全屏出错
    • 详细介绍html5之拖放的示例代码
    • React组件的使用详解
    • HTML5幻灯片系统:H5Slides

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有