原文地址:HTML5′s window.postMessage API

在线示例:Using HTML5's window.postMessage(请打开控制台看日志)

原文日期: 2010年09月03日

翻译日期: 2013年08月24日



我写了一个 MooTools 的插件"PostMessager"来封装window.postMessage,你可以点击这里下载!



HTML5 的  window.postMessage 接口API 还没有多少人了解。  window.postMessage允许多个 window/frame之间跨域传递数据和信息。实质上window.postMessage扮演了一个跨域Ajax请求的角色,当然,并不需要远程服务器来协作。接下来将介绍window.postMessage的工作原理,以及如何在FireFox,IE8+,Opera,Safari和Chrome中使用它.



一、消息发送端

整个过程的第一步,是设定一个"消息源"。通过这个消息源,我们可以往新打开的window(或者iframe)发送window级别的数据(消息)。在下面的示例中,给新窗口发送消息的频率是每6秒一次,并设置事件监听来处理目标window返回的响应信息。

function trace(message){
	var infos = Array.prototype.slice.call(arguments,0).join(" ");
	if("console" in window){
		console.log(infos);
	} else {
		alert(infos);
	}
};
// 创建弹出窗口
var domain = 'http://scriptandstyle.com';
var myPopup = window.open(domain + '/windowPostMessageListener.html','myWindow');

// 定时发送消息
setInterval(function(){
	var message = '现在时间: ' + (new Date().getTime());
	trace('数据源.发送的消息:  ' + message);
	myPopup.postMessage(message,domain); //发送数据信息,并设置目标URI
},6*1000);

function bindEvent(target,noOnEventName,handler){
	if(window.addEventListener){
		target.addEventListener(noOnEventName,handler);
	} else if(window.attachEvent){
		// IE 的监听设置函数是attachEvent
		target.attachEvent("on"+noOnEventName,handler);
	} else {
		target["on"+noOnEventName]=handler;
	}
};

// 监听收到的信息.
bindEvent(window,'message',function(event) {
	// 只接收特定域的消息
	if(event.origin !== 'http://scriptandstyle.com') return;
	trace('收到的响应信息:  ',event.data);
},false);

原文作者使用的是window.addEventListener方法来绑定事件,但是在IE下将会报错(IE是window.attachEvent).当然,你可以创建函数来包装事件,或者使用现成的类库,比如MooTools或者jQuery/dojo来实现。

在上面的示例中,如果新窗口打开正常,那我们可以通过window对象的引用myPopup发送消息,并指定必须匹配的URI(协议、主机名、端口号)(如果用户在子窗口中跳到其他页面,则消息将不会发送).

同样我们也绑定了事件处理函数来接收消息message。在此提醒,校验message事件的origin(源)属性很重要,因为可能接收到所有URI发给自己的消息,在多个frame交互时才不至于混淆。 校验过origin之后,如何处理此消息,取决于你具体的业务和需求。



如果使用iframe的话,那么代码如下:

// 同样创建另一个window(iframe,frame,frameset,top,window这些都属于window相关的对象。)
var domain = 'http://scriptandstyle.com';
var iframe = document.getElementById('myIFrame').contentWindow;

// 循环发送消息,当然,也可以采用事件驱动之类的。。。
setInterval(function(){

	var message = '现在时间: ' + (new Date().getTime());
	trace('数据源.发送的消息:  ' + message);
	iframe.postMessage(message,domain); //发送数据信息,并设置目标URI
},6*1000);

确保能访问到iframe对象的contentWindow 属性——而不仅仅是iframe对象。



二、消息接收端

整个流程的第二步就是让目标window就绪。目的窗口所要做的,就是监听message事件,当然也要验证事件的origin消息源。再次提醒:message事件处理函数可以接受任何域名发给他的消息,所以验证origin以及只处理信任列表的message非常重要。

// 监听收到的信息.
bindEvent(window,'message',function(event) {
	// 只接收特定域的消息
	if(event.origin !== 'http://davidwalsh.name') return;
	trace('监听到信息:  ',event.data);
	// 回复消息
	event.source.postMessage(""你好,小伙伴们,我已经收到消息了,event.origin);
},false);

上面的示例回复了响应信息给请求方。

message事件重要的属性有:

source - 发送message的window/iframe对象

origin - 对应着发送消息window的URI (protocol, domain, and port, 如果有指定的话)

data - 具体的数据信息

对于消息系统以及校验来说,这三个对象是必不可少的。





window.postMessage 使用注意事项

就和其他所有的Web技术一样,如果使用不当(没有验证事件源)那危险性是显而易见的。当然,安全性由你自己来保证。

window.postMessage 很像JavaScript技术中的PHP(哈哈,小广告!).window.postMessage 算是一种很酷炫的技术,你觉得呢?

HTML5 window/iframe跨域传递消息 API的更多相关文章

  1. javascript跨域传递消息 / 服务器实时推送总结

    参考文档,下面有转载[非常好的两篇文章]: http://www.cnblogs.com/loveis715/p/4592246.html [跨源的各种方法总结] http://kb.cnblogs. ...

  2. iframe跨域数据传递

    项目中需要和其他单位合作开发,方案采用iframe嵌入页面,开发过程中设计到了跨域数据的传递,初步方案决定使用html5 API postMessage进行iframe跨域数据传递: 域名A下的页面 ...

  3. 解决Iframe跨域高度自适应,利用window.postMessage()实现跨域消息传递页面高度(JavaScript)

    在iframe跨域引用高度自适应这块写的js方式都试了不管用,最终使用的是window.postMessage() 跨域获取高度 传递信息 1.首先,在主页面上使用iframe引入子页面:也就是A.h ...

  4. 利用window.name+iframe跨域获取数据详解

    详解 前文提到用jsonp的方式来跨域获取数据,本文为大家介绍下如何利用window.name+iframe跨域获取数据. 首先我们要简单了解下window.name和iframe的相关知识.ifra ...

  5. iframe 跨域问题解决方案 利用window.name+iframe跨域获取数据详解

    详解 前文提到用jsonp的方式来跨域获取数据,本文为大家介绍下如何利用window.name+iframe跨域获取数据. 首先我们要简单了解下window.name和iframe的相关知识.ifra ...

  6. iframe跨域+

    script.image.iframe的src都不受同源策略的影响.所以我们可以借助这一特点,实现跨域.如前面所介绍的JSONP跨域,以及灯标(Beacons). 该篇随笔主要阐述iframe结合一些 ...

  7. html5 postMessage解决跨域、跨窗口消息传递

    一些麻烦事儿 平时做web开发的时候关于消息传递,除了客户端与服务器传值还有几个经常会遇到的问题 1.页面和其打开的新窗口的数据传递 2.多窗口之间消息传递 3.页面与嵌套的iframe消息传递 4. ...

  8. html5 postMessage解决跨域、跨窗口消息传递[转载]

    原文:http://www.cnblogs.com/dolphinX/p/3464056.html 一些麻烦事儿 平时做web开发的时候关于消息传递,除了客户端与服务器传值还有几个经常会遇到的问题 1 ...

  9. [转]html5: postMessage解决跨域和跨页面通信的问题

    [转]html5: postMessage解决跨域和跨页面通信的问题 平时做web开发的时候关于消息传递,除了客户端与服务器传值,还有几个经常会遇到的问题: 多窗口之间消息传递(newWin = wi ...

随机推荐

  1. C++笔记002:VS2010报错:LINK fatal error LNK1123 转换到 COFF 期间失败文件无效或损坏

    原创笔记,转载请注明出处! 点击[关注],关注也是一种美德~ 错误描述: 1>------ 已启动生成: 项目: FirstCode, 配置: Debug Win32 ------ 1>生 ...

  2. Dockerfile基本结构

    Dockerfile 由一行行命令语句组成,并且支持以 # 开头的注释行. 一般的,Dockerfile 分为四部分:基础镜像信息.维护者信息.镜像操作指令和容器启动时执行指令. 例如 # This ...

  3. Django Views(视图函数)

    http请求中产生两个核心对象: http请求:HttpRequest对象 http响应:HttpResponse对象 所在位置:django.http 之前我们用到的参数request就是HttpR ...

  4. 使用Spring Boot开发Web项目

    前面两篇博客中我们简单介绍了Spring Boot项目的创建.并且也带小伙伴们来DIY了一个Spring Boot自动配置功能,那么这些东西说到底最终还是要回归到Web上才能体现出它的更大的价值,so ...

  5. nginx平台初识(一)

    众所周知,nginx性能高,而nginx的高性能与其架构是分不开的.那么nginx究竟是怎么样的呢?这一节我们先来初识一下nginx框架吧. nginx在启动后,在unix系统中会以daemon的方式 ...

  6. 微信开发之使用java获取签名signature(贴源码,附工程)

    一.前言 微信接口调用验证最终需要用到的三个参数noncestr.timestamp.signature: 接下来将会给出获取这三个参数的详细代码 本文的环境eclipse + maven 本文使用到 ...

  7. linux 服务器网络有关的内核参数

    几乎所有的内核模块,包括内核核心模块和驱动程序,都在/proc/sys 文件系统下提供了某些配置文件以提供用户调整模块的属性和行为.通常一个配置文件对应一个内核参数,文件名就是参数的名字,文件的内容是 ...

  8. 使用MD5SUM检查文件

    有不少网站提供下载文件的同时,提供了文件的MD5SUM的值.如何检查自己下载的文件与原文件一样呢?用md5sum的-c选项. 操作如下: 1.先新建一个文本文件,写入网站上提供的md5sum的值,空两 ...

  9. PGM:贝叶斯网表示之朴素贝叶斯模型naive Bayes

    http://blog.csdn.net/pipisorry/article/details/52469064 独立性质的利用 条件参数化和条件独立性假设被结合在一起,目的是对高维概率分布产生非常紧凑 ...

  10. Android逆向工程

    在Root前提下,我们可以使用Hooker方式绑定so库,通过逆向方式篡改数值,从而达到所谓破解目的.然而,目前无论是软件加固方式,或是数据处理能力后台化,还是客户端数据真实性验证,都有了一定积累和发 ...