使用html5 postMessage和window.name实现多浏览器跨域
跨域是个“很古老”的问题,因为浏览器的同源策略,导致不同域名下不能进行跨域名请求数据,虽然这样设计安全了很多,但是对于大型的网站同时维护多个域名就需要进行跨域操作。例如:微博开放平台的jssdk实现的跨域请求数据,再例如weibo.com和sina.com的同步登录。
之前我也说过不少跨域的方式了,有结合服务器端的,有纯粹javascript实现的跨域,例如:《利用跨域资源共享�-ORS)实现ajax跨域调用》、《用document.domain+iframe实现Ajax跨子域》、《通过JSONP实现完美跨域》。在我的上一篇文章《javascript入门到高级PPT》中也提到了跨域。
当然也有不少关于跨域的文章,例如口碑UED的文章《跨域资源共享的10种方式》等等。大家可以去阅读一下。
今天我说的html5 postMessage和window.name也不是一种新的跨域方式,因为有不少人写文章写了,而实际应用的我不知道有哪些人?不过新浪微博的新旧两个jssdk都是采用这种方式,包括之前的人人网的xd.html,当然现在的人人和facebook都是通过flash实现的跨域,这不是今天说的内容。
html5 postMessage实现跨域
postMessage是html5的一个新功能,可以实现不同域名之间的通信,通过给postMessage方式发送数据,监听则通过在父子窗口添加onmessage事件进行。
缺点也就很明显了,只有支持html5的浏览器才支持这种跨域方式,像IE6、7当然就拒之门外了!
window.name实现跨域
window.name实现跨域也是一个比较老的问题,之前kejun写过一个demo,可是给的却是同域名的通信。
其实kejun的实例中就是实现跨域的,不过他采用了同一个域名,而且过程比较崎岖:
充分的运用了window.name因为页面的url改变而name不改变的特性。
但是如果我们是自己用,还是可以的,而如果我们放出去要别人使用我们写的东西,那样学习成本太大。
多浏览器双向跨域
为了解决上面的问题,我们使用的方法就是如果支持postMessage的浏览器就使用postMessage,如果不支持的就采用window.name的方式,幸运的是在IE6、7中支持跨域设置window.name,而我们就可以简单的通过window.name来跨域。然后建立计时器来监听window.name是否发生了变化,如果变化则接收并分析window.name,然后做请求。
废话不多说了~直接来个跨域的demo。
建议继续学习:
- 优雅绝妙的Javascript跨域问题解决方案 (阅读:6732)
- jQuery中getJSON跨域原理详解 (阅读:5612)
- 跨域请求的iframe解决方案(1) (阅读:5385)
- ajax-cross-domain (阅读:4981)
- 利用跨域资源共享(CORS)实现ajax跨域调用 (阅读:4141)
- 研究ext发现ajax跨域实现 (阅读:3733)
- 三谈Iframe自适应高度 (阅读:3625)
- 使用window.postMessage实现跨域通信 (阅读:3391)
- 使用document.domain和iframe实现站内AJAX跨域 (阅读:3305)
- 跨域请求的iframe解决方案(2) (阅读:3138)
扫一扫订阅我的微信号:IT技术博客大学习
- 作者:断桥残雪 来源: 断桥残雪部落格
- 标签: 跨域
- 发布时间:2011-09-14 13:50:14
- [69] 如何拿下简短的域名
- [67] Go Reflect 性能
- [63] Oracle MTS模式下 进程地址与会话信
- [60] IOS安全–浅谈关于IOS加固的几种方法
- [60] 【社会化设计】自我(self)部分――欢迎区
- [59] 图书馆的世界纪录
- [57] android 开发入门
- [55] 视觉调整-设计师 vs. 逻辑
- [48] 界面设计速成
- [47] 读书笔记-壹百度:百度十年千倍的29条法则