HTML5 window/iframe跨域传递消息 API
原文地址: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的更多相关文章
- javascript跨域传递消息 / 服务器实时推送总结
参考文档,下面有转载[非常好的两篇文章]: http://www.cnblogs.com/loveis715/p/4592246.html [跨源的各种方法总结] http://kb.cnblogs. ...
- iframe跨域数据传递
项目中需要和其他单位合作开发,方案采用iframe嵌入页面,开发过程中设计到了跨域数据的传递,初步方案决定使用html5 API postMessage进行iframe跨域数据传递: 域名A下的页面 ...
- 解决Iframe跨域高度自适应,利用window.postMessage()实现跨域消息传递页面高度(JavaScript)
在iframe跨域引用高度自适应这块写的js方式都试了不管用,最终使用的是window.postMessage() 跨域获取高度 传递信息 1.首先,在主页面上使用iframe引入子页面:也就是A.h ...
- 利用window.name+iframe跨域获取数据详解
详解 前文提到用jsonp的方式来跨域获取数据,本文为大家介绍下如何利用window.name+iframe跨域获取数据. 首先我们要简单了解下window.name和iframe的相关知识.ifra ...
- iframe 跨域问题解决方案 利用window.name+iframe跨域获取数据详解
详解 前文提到用jsonp的方式来跨域获取数据,本文为大家介绍下如何利用window.name+iframe跨域获取数据. 首先我们要简单了解下window.name和iframe的相关知识.ifra ...
- iframe跨域+
script.image.iframe的src都不受同源策略的影响.所以我们可以借助这一特点,实现跨域.如前面所介绍的JSONP跨域,以及灯标(Beacons). 该篇随笔主要阐述iframe结合一些 ...
- html5 postMessage解决跨域、跨窗口消息传递
一些麻烦事儿 平时做web开发的时候关于消息传递,除了客户端与服务器传值还有几个经常会遇到的问题 1.页面和其打开的新窗口的数据传递 2.多窗口之间消息传递 3.页面与嵌套的iframe消息传递 4. ...
- html5 postMessage解决跨域、跨窗口消息传递[转载]
原文:http://www.cnblogs.com/dolphinX/p/3464056.html 一些麻烦事儿 平时做web开发的时候关于消息传递,除了客户端与服务器传值还有几个经常会遇到的问题 1 ...
- [转]html5: postMessage解决跨域和跨页面通信的问题
[转]html5: postMessage解决跨域和跨页面通信的问题 平时做web开发的时候关于消息传递,除了客户端与服务器传值,还有几个经常会遇到的问题: 多窗口之间消息传递(newWin = wi ...
随机推荐
- SSH上一个随笔的基础上添加上hibernate支持
配置文件 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.o ...
- UCSC下载ENCODE数据
ENCODE数据库用于存放基因组原件,所有的测序数据(原始数据以及每一步处理后的数据以及最终的结果)都是开放下载的.假如说去官网下载的话会比较麻烦,这里可以通过UCSC的数据库下载(真的是神器啊)!下 ...
- CRM客户关系管理系统(六)
第六章.排序和搜索功能开发 6.1.排序功能开发 (1)kingadmin_tags.py @register.simple_tag def get_sorted_column(column,sor ...
- PHP 实例 AJAX 与 MySQL
AJAX 数据库实例 下面的实例将演示网页如何通过 AJAX 从数据库读取信息: 实例 Person info will be listed here... 实例解释 - MySQL 数据库 在上 ...
- About Windows 10 April 2018 Update
在四月的最后一天,微软终于正式发布了 Windows 10 的又一次重大更新,并命名为 Windows 10 四月更新,轮压哨,我软确实谁也不服:再晚一天,我软改名部门恐怕又要发挥作用了,毕竟我软存在 ...
- 使用Boost program_options控制程序输入
简介 很多人使用界面来输入数据,本文的程序介绍如何使用Boost的program_options控制输入. 程序中使用了: 1. 短选项 2. 可以指定多个参数的选项 程序 #include < ...
- MySQL系列教程(二)
mySQL执行计划 语法 explain <sql语句> 例如: explain select * from t3 where id=3952602; explain输出解释 +---- ...
- SpringBatch配置数据库
Spring Batch提供一个任务的仓库实现将任务元数据保存在数据库中,以便监控你的批量处理进程以及其结果. Spring Batch 数据库引擎支持的有:DB2,Derby, H2, HSQLDB ...
- linux2.6.37内核接两个硬盘导致读写效率变低的问题
一.问题分析: 通过跟踪定位write系统调用的实现发现,在每次调用a_ops->write_end之后,都会去调用balance_dirty_pages_ratelimited,该函数负责检查 ...
- springMVC源码分析--AbstractControllerUrlHandlerMapping(六)
上一篇博客springMVC源码分析--AbstractDetectingUrlHandlerMapping(五)中我们介绍了AbstractDetectingUrlHandlerMapping,其定 ...