技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置首页 --> JavaScript --> 使用html5 postMessage和window.name实现多浏览器跨域

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

浏览:2911次  出处信息

    跨域是个“很古老”的问题,因为浏览器的同源策略,导致不同域名下不能进行跨域名请求数据,虽然这样设计安全了很多,但是对于大型的网站同时维护多个域名就需要进行跨域操作。例如:微博开放平台的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. 优雅绝妙的Javascript跨域问题解决方案    (阅读:6686)
    2. jQuery中getJSON跨域原理详解    (阅读:5548)
    3. 跨域请求的iframe解决方案(1)    (阅读:5318)
    4. ajax-cross-domain    (阅读:4924)
    5. 利用跨域资源共享(CORS)实现ajax跨域调用    (阅读:4070)
    6. 研究ext发现ajax跨域实现    (阅读:3682)
    7. 三谈Iframe自适应高度    (阅读:3579)
    8. 使用window.postMessage实现跨域通信    (阅读:3353)
    9. 使用document.domain和iframe实现站内AJAX跨域    (阅读:3241)
    10. 跨域请求的iframe解决方案(2)    (阅读:3100)
    QQ技术交流群:445447336,欢迎加入!
    扫一扫订阅我的微信号:IT技术博客大学习
    © 2009 - 2024 by blogread.cn 微博:@IT技术博客大学习

    京ICP备15002552号-1