HTML5 window/iframe跨域传递消息 API介绍


Posted in HTML / CSS onAugust 26, 2013

原文地址:HTML5′s window.postMessage API
在线示例:Using HTML5's window.postMessage(请打开控制台看日志)

我写了一个 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 算是一种很酷炫的技术,你觉得呢?

HTML / CSS 相关文章推荐
一款超酷的js+css3实现的3D标签云特效兼容ie7/8/9
Nov 18 HTML / CSS
CSS3控制HTML元素动画效果
Feb 08 HTML / CSS
css3让div随鼠标移动而抖动起来
Feb 10 HTML / CSS
纯css3制作煽动翅膀的蝴蝶的示例
Apr 23 HTML / CSS
html5文本内容_动力节点Java学院整理
Jul 11 HTML / CSS
利用canvas实现图片下载功能来实现浏览器兼容问题
May 31 HTML / CSS
HTML5引入的新数组TypedArray介绍
Dec 24 HTML / CSS
html特殊符号示例 html特殊字符编码对照表
Jan 14 HTML / CSS
HTML5语义化元素你真的用对了吗
Aug 22 HTML / CSS
HTML5表单验证特性(知识点小结)
Mar 10 HTML / CSS
CSS3 天气图标动画效果
Apr 06 HTML / CSS
浅谈由position属性引申的css进阶讨论
May 25 HTML / CSS
HTML5在a标签内放置块级元素示例代码
Aug 23 #HTML / CSS
HTML5 script元素async、defer异步加载使用介绍
Aug 23 #HTML / CSS
html5基础教程常用技巧整理
Aug 20 #HTML / CSS
HTML5中div、article、section的区别及使用介绍
Aug 14 #HTML / CSS
用html5的canvas画布绘制贝塞尔曲线完整代码
Aug 14 #HTML / CSS
HTML5 embed 标签使用方法介绍
Aug 13 #HTML / CSS
HTML5 input元素类型:email及url介绍
Aug 13 #HTML / CSS
You might like
PHP编程中的常见漏洞和代码实例
2014/08/06 PHP
thinkPHP5.0框架事务处理操作简单示例
2018/09/07 PHP
JS获取父节点方法
2009/08/20 Javascript
网页前端优化之滚动延时加载图片示例
2013/07/13 Javascript
Javascript中对象继承的实现小例
2014/05/12 Javascript
让checkbox不选中即将选中的checkbox不选中
2014/07/11 Javascript
Nodejs实现的一个静态服务器实例
2014/12/06 NodeJs
jQuery定义背景动态切换效果的方法
2015/03/23 Javascript
JS实现光滑展开合拢的菜单效果代码
2015/09/16 Javascript
解决node.js安装包失败的几种方法
2016/09/02 Javascript
jQuery常用样式操作实例分析(获取、设置、追加、删除、判断等)
2016/09/08 Javascript
Vue.js组件间的循环引用方法示例
2017/12/27 Javascript
Vue内部渲染视图的方法
2019/09/02 Javascript
JavaScript实现随机五位数验证码
2019/09/27 Javascript
在 Vue 中使用 JSX 及使用它的原因浅析
2020/02/10 Javascript
Python实现的数据结构与算法之双端队列详解
2015/04/22 Python
Python 中的lambda函数介绍
2018/10/10 Python
10 行 Python 代码教你自动发送短信(不想回复工作邮件妙招)
2018/10/11 Python
对python多线程中Lock()与RLock()锁详解
2019/01/11 Python
使用python写的opencv实时监测和解析二维码和条形码
2019/08/14 Python
python subprocess pipe 实时输出日志的操作
2020/12/05 Python
Pytorch自定义Dataset和DataLoader去除不存在和空数据的操作
2021/03/03 Python
英国剑桥包中文官网:The Cambridge Satchel Company中国
2018/11/06 全球购物
俄罗斯在线大型超市:ТутПросто
2021/01/08 全球购物
LACOSTE波兰官网:Polo衫、服装和鞋类
2020/09/29 全球购物
亚马逊海外购:亚马逊美国、英国、日本、德国直邮
2021/03/18 全球购物
大课间活动实施方案
2014/03/06 职场文书
文秘档案管理岗位职责
2014/03/06 职场文书
体育教育毕业生自荐信
2014/06/29 职场文书
家庭贫困证明范本(经典版)
2014/09/22 职场文书
“四风”查摆问题自我剖析材料
2014/09/27 职场文书
走近毛泽东观后感
2015/06/04 职场文书
Python一些基本的图像操作和处理总结
2021/06/23 Python
Redis 持久化 RDB 与 AOF的执行过程
2021/11/07 Redis
工厂无线对讲系统解决方案
2022/02/18 无线电
手把手带你彻底卸载MySQL数据库
2022/06/14 MySQL