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

　　在来自不同域名的页面间传递消息一般统称为跨文档消息传送，简称xdm。如，www.leemagnum.com域中的页面与位于一个内嵌框架中的https://blog.csdn.net/lee_magnum域名中的页面通信。在xdm机制出现之前，要毫无压力地实现这种通信需要用很长时间。xdm把这种机制规范化，让咱们能够既稳妥又简单地实现跨文档通信。

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

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

　　html代码

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

　　javascript代码

//获取框架中的window
var iframewin = document.getelementbyid("iframe").contentwindow;
alert(iframewin) // [object window]

//向框架中发送消息
iframewin.postmessage("一个消息", "https://blog.csdn.net/lee_magnum")

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

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

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

　　origin：发送消息的文档所在的域，如”https://blog.csdn.net/lee_magnum”

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

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

　　javascript代码

window.addeventlistener('message',function(event){
	//确保发送消息的域名是已知的域名
	if(event.origin == "https://blog.csdn.net/lee_magnum"){
		//处理接收到的数据
		processmessage(event.data);
		//可选：向来源窗口发送回执
		event.source.postmessage("收到了", "https://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的官方页面是https://dev.w3.org/html5/postmsg/

　　html5实战与剖析之跨文档消息传递(iframe传递信息)的相关知识就为大家介绍到这里了，更多有关html5的相关东东还请关注梦龙小站的相关更新。