IT技术博客大学习 共学习 共进步
全部 移动开发 后端 数据库 AI 算法 安全 DevOps 前端 设计 开发者

使用html5 postMessage和window.name实现多浏览器跨域

断桥残雪部落格 2011-09-14 13:50:14 累计浏览 3,682 次
本机暂存

    跨域是个“很古老”的问题,因为浏览器的同源策略,导致不同域名下不能进行跨域名请求数据,虽然这样设计安全了很多,但是对于大型的网站同时维护多个域名就需要进行跨域操作。例如:微博开放平台的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的实例中就是实现跨域的,不过他采用了同一个域名,而且过程比较崎岖:

  • 建立iframe,指定src为被跨域的页面
  • 被跨域文件修改window.name,将数据传给window.name
  • 将iframe.src修改为本域代理文件,然后就可以取到contentWindow.name
  • 进行处理数据,清除iframe
  •     充分的运用了window.name因为页面的url改变而name不改变的特性。

         但是如果我们是自己用,还是可以的,而如果我们放出去要别人使用我们写的东西,那样学习成本太大。

    多浏览器双向跨域

        为了解决上面的问题,我们使用的方法就是如果支持postMessage的浏览器就使用postMessage,如果不支持的就采用window.name的方式,幸运的是在IE6、7中支持跨域设置window.name,而我们就可以简单的通过window.name来跨域。然后建立计时器来监听window.name是否发生了变化,如果变化则接收并分析window.name,然后做请求。

         废话不多说了~直接来个跨域的demo。

    多浏览器双向跨域demo

    同分类推荐文章

    1. translateZ() (2026-06-25 21:18:56)
    2. translateY() (2026-06-25 21:17:56)
    3. translateX() (2026-06-25 21:16:01)

    查看更多 前端 文章 →

    建议继续学习

    1. HTML5 离线缓存-manifest简介 (累计阅读 17,102)
    2. HTML 5 的data-* 自定义属性 (累计阅读 14,349)
    3. jQuery的data()方法 (累计阅读 8,651)
    4. 前端必须熟悉的10个CSS3属性 (累计阅读 7,718)
    5. 面向移动设备的HTML5开发框架梳理 (累计阅读 7,418)
    6. 30个超棒的404错误页面 (累计阅读 7,301)
    7. HTML5+CSS3 loading 效果收集 (累计阅读 6,438)
    8. 给HTML初学者的30条最佳实践 (累计阅读 5,808)
    9. Phonegap + HTML5 开发经验小结 (累计阅读 5,344)
    10. HTML5本地存储初探(二) (累计阅读 5,215)