HTML5的postMessage使用记要
HTML5提出了一个新的用来跨域传值的方法,即postMessage(这个名字太通俗了所以你最好看看是不是自己写过一个同名的把它覆盖了)。幸运的是IE8就开始支持了。
我们假设有两个网站,1.com与2.com,我在1.com的页面上通过iframe或window.open或超链接打开了一个2.com的网页,此时我要在2.com上做操作的时候,给1.com传值,让1.com有所变化。这个过程就是个跨域的过程。
如果你对window.open熟,你就会知道通过window.open打开的网页(我们称之为子网页),可以通过window.opener对 象,访问到把它打开的页面(父网页),这样一来,调用父页面的函数就是非常简单的事了。但是,在跨域的条件下,window.opener就成了一个空对 象,“没有权限”,浏览器会这么告诉你。
比如,你的父页面有个函数叫callback,然后你子页面本可以这样调用:window.opener.callback(),同域时能成功,跨域时就没有权限了。
但是,此时你调用window.opener.postMessage(),却可以成功!
关于跨域传值的痛苦我就不多说了,本文只说一些前两天学习postMessage时了解到的重要知识点。
postMessage语法
window.postMessage(msg,targetOrigin)
这里我要专门说一下postMessage要通过window对象调用!因为这里的window不只是当前window,大部分使用postMessage的时候,都不是本页面的window,而是其他网页的window!如:
1,iframe的contentWindow
2,通过window.open方法打开的新窗口的window
3,window.opener
如果你使用postMessage时没有带window,那么,当然,你就是用的本页面的window来调用了它。
postMessage的名字很容易误导用户,以为他是用来从一个页面往另一个页面”post”,实际上他和onclick等一样,也只能在本页面定义,本页面处理交互,只是可以从其他页面调用本页面的postMessage.
参数说明
msg
这就是要传递的消息了。它可以是一切javascript参数,如字符串,数字,对象,数组,而不是和json一样只局限于字符串,很强大吧?
targetOrigin
这个参数称作“目标域”,注意啦,是目标域不是本域!比如,你想在2.com的网页上往1.com网页上传消息,那么这个参数就是“http://1.com/”,而不是2.com.
另外,一个完整的域包括:
协议,主机名,端口号。如:http://g.cn:80/
获取postMessage传过来的消息
要对postMessage传来的消息进行处理,就要在页面上加一个onmessage事件。如:
window.addEventListener('message',function (e) { console.log(e.origin,e.data); alert('有数据传来了!'); })
要注意:最好是通过addEventListener或attachEvent来加入onmessage事件,而不要直接window.onmessage=function(){},因为有的浏览器这样加会识别不了(如低版Firefox)
这个onmessage事件接受一个参数,就是代码里的e,实际上他就是一个event对象。但他里面有很明显的3个参数与其他event对象不一样,即:
1,data:顾名思义,是传递来的message
2,source:发送消息的窗口对象
3,origin:发送消息窗口的源(协议+主机+端口号).比如从2.com往1.com发了消息,那么1.com收到消息时,e.origin就是2.com
最重要的就是data了,你可以用e.data取得他,然后做后续操作了。不过为了安全,你最好先判断一下e.source和e.origin是不是正确来源,再作操作。
完整的postMessage流程示例
接着刚才的例子来,我着重讲一个弹窗给父页面传消息的例子。
我们的父页面叫1.com,他上面有关键代码是:
window.addEventListener('message',function (e) {
console.log(e.origin,e.data);
alert('子页面有数据传来了!');
})
就这么简单。而弹出窗口(2.com)上的代码是:
var domain = 'http://1.com/';
window.opener.postMessage({obj:'I am a obj'},domain)
还是很简单吧!你看,跨域时本来不能访问的window.opener可以访问了——不过你直接调用父页面的方法还是会失败!就是这么不讲理。
其他应用场景的例子
1,必须要说明:通过超链接打开的新窗口也能用window.opener来访问其父页面,代码跟上面一样
2,iframe的例子
父页面:
var o = document.getElementsByTagName('iframe')[0];
o.contentWindow.postMessage('Hello World', "*");//向框架页传消息
被框架包裹的子页面:
window.addEventListener('onmessage',function(e) {
if (e.domain == '1.com') {
if (e.data == 'Hello World') {
e.source.postMessage('Hello', "*"); //反过来向父页面传消息
} else {
alert(e.data);
}
}
});
这个例子充分说明了postMessage是双向的。
3,window.open一个窗口,然后向他传消息
父页面:
var domain2 = 'http://2.com/';
var win = window.open(domain2+'Portal/2.com.html','wwwwwwww')
setTimeout(function () {
win.postMessage('ddddddddd',domain2)
},2000)
子页面:
window.addEventListener('message',function (e) {
console.log(e.origin,e.data)
})
要注意父页面中的setTimeout,也就是要延迟传消息,因为子页面不可能瞬间加载完成,他的onmessage事件也就没初始化成功,这时给他传消息,当然是收不到的了。
后记
1,IE8+虽然支持postMessage,但只支持iframe的方式,window.open打开的新窗口之间,没法用。直到IE10才有相关改进
2,如何在本地模拟跨域呢?在hosts文件里加入:
127.0.0.1 1.com
127.0.0.1 2.com
就可以模拟出2个不同的域名了。
参照信息:
HTML5 postMessage 和 onmessage API 详细应用
http://msdn.microsoft.com/en-us/library/ie/cc197015(v=vs.85).aspx
http://stackoverflow.com/questions/16226924/is-cross-origin-postmessage-broken-in-ie10
https://developer.mozilla.org/zh-CN/docs/Web/API/Window.postMessage
本文来自:http://jo2.org/html5-js-postmessage-tips/
HTML5的postMessage使用记要的更多相关文章
- HTML5的postMessage使用记要////////////////////////////zzzzzzzz
2014-11-09 20:17:27http://jo2.org/html5-js-postmessage-tips/--点击数:2710 HTML5提出了一个新的用来跨域传值的方法,即po ...
- 通过Html5的postMessage和onMessage方法实现跨域跨文档请求访问
在项目中有应用到不同的子项目,通过不同的二级域名实现相互调用功能.其中一个功能是将播放器作为单独的二级域名的请求接口,其他项目必须根据该二级域名调用播放器.最近需要实现视频播放完毕后的事件触发,调用父 ...
- html5的postmessage实现js前端跨域訪问及调用解决方式
关于跨域訪问.使用JSONP的方法.我前面已经demo过了.详细见http://supercharles888.blog.51cto.com/609344/856886,HTML5提供了一个很强大的A ...
- 使用HTML5中postMessage实现Ajax中的POST跨域问题
HTML5中提供了在网页文档之间相互接收与发送信息的功能.使用这个功能,只要获取到网页所在窗口对象的实例,不仅仅同源(域+端口号)的web网页之间可以互相通信,甚至可以实现跨域通信. 浏览器支持程度: ...
- 使用HTML5中postMessage 实现ajax中的POST跨域问题
HTML5中提供了在网页文档之间相互接收与发送信息的功能.使用这个功能,只要获取到网页所在窗口对象的实例,不仅仅同源(域+端口号)的web网页之间可以互相通信,甚至可以实现跨域通信. 浏览器支持程度: ...
- html5 window.postMessage 传递数据的使用
window.postMessage(图片介绍): 发送方(图片介绍): 接收方(图片介绍): 个人测试一(iframe): 发送方,地址为:http://localhost:63342/HelloH ...
- HTML5 postMessage 跨域交换数据
前言 之前简单讲解了利用script标签(jsonp)以及iframe标签(window.name.location.hash)来跨域交换数据,今天我们来学习一下HTML5的api,利用postMes ...
- 利用HTML5的window.postMessage实现跨域通信
详见: http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp77 HTML5的window.postMessage简述 postM ...
- 跨域问题实践总结!下( [HTML5] postMessage+服务器端(反向代理服务器+CORS Cross-Origin Resource Sharing))
4. [HTML5] postMessage 问题: 对于跨域问题,研究了一下html5的postMessage,写了代码测试了一下,感觉html5新功能就是好用啊.此文仅使用html5的新特性pos ...
随机推荐
- 在vs2012中用C#开发Android应用Xamarin环境搭建
Xamarin是Mono创始人Miguel de Icaza创建的公司,旨在让开发者可以用C#编写iOS, Android, Mac应用程序,也就是跨平台移动开发. 简介 Xamarin是基于Mono ...
- SharePoint 2013 Excel Services ECMAScript 示例之明日限行
前言:最近遇到一个“明日限行”的功能,北京的交通啊,这个不在今天讨论范围内,暂不吐槽,想想代码开发,还要写WebPart部署,很麻烦,而且部署服务器,需要领导审批,想绕过这个麻烦事儿,就想到客户端了, ...
- sqlserver下调试sql语句
现在版本的sqlServer已经支持调试功能了,但是在使用的时候用到的却很少(毕竟print习惯了..) 这里做一个笔记,简单的说明一下在sqlserver下调试的方法: declare @i int ...
- GCD
Grand Central Dispatch(GCD)包含语言特点.运行库和系统增强功能,它提供系统的.综合的改进,进而去支持并发代码在iOS和OSX多核硬件上的执行. 子系统.CoreFoundat ...
- iOS Swift-控制流(The Swift Programming Language)
iOS Swift-控制流(The Swift Programming Language) for-in 在Swift中for循环我们可以省略传统oc笨拙的条件和循环变量的括号,但是语句体的大括号使我 ...
- Java Serializable系列化与反系列化
[引言] 将 Java 对象序列化为二进制文件的 Java 序列化技术是 Java 系列技术中一个较为重要的技术点,在大部分情况下,开发人员只需要了解被序列化的类需要实现 Serializable 接 ...
- shell脚本执行时报"bad interpreter: Text file busy"的解决方法
在执行一个shell脚本时,遇到了“-bash: ./killSession.sh: /bin/bash: bad interpreter: Text file busy”错误提示,如下所示: [or ...
- URL无法显示某些特殊符号
URL无法显示某些特殊符号,这个时候就要使用编码了.编码的格式为:一个百分号,后面跟对应字符的ASCII(16进制)码值.例如 空格的编码值是"%20".(ASCII参考)URL中 ...
- Hibernate注解----类级别注解以及属性注解详解----图片版本
这篇文章是我在慕课网上学习Hibernate注解的时候进行手机以及整理的笔记. 今天把它分享给大家,希望对大家有用.可以进行收藏,然后需要的时候进行对照一下即可.这样能起到一个查阅的作用. 本文主要讲 ...
- 【转】jquery 中scrollTop在Firefox下不起作用
原文链接:http://stackoverflow.com/questions/8149155/animate-scrolltop-not-working-in-firefox Animate scr ...