设为首页收藏本站

就爱编程论坛

 找回密码
 注册

人人连接登陆

无需注册,直接登录

用新浪微博连接

一步搞定

QQ登录

只需一步,快速开始

查看: 615|回复: 0
打印 上一主题 下一主题

window.name实现的跨域数据传输 [复制链接]

Rank: 9Rank: 9Rank: 9

  • TA的每日心情
    无聊
    2025-5-27 03:37:20
  • 签到天数: 366 天

    [LV.9]以坛为家II

    论坛先锋 学习至圣 荣誉成员 论坛元老 活跃之星 终极领袖

    我玩的应用:

    跳转到指定楼层
    楼主
    发表于 2011-6-14 12:41:17 |只看该作者 |倒序浏览

    有三个页面:


      a.com/app.html:应用页面。 a.com/proxy.html:代理文件,一般是一个没有任何内容的html文件,需要和应用页面在同一域下。
    • b.com/data.html:应用页面需要获取数据的页面,可称为数据页面。

    实现起来基本步骤如下:


      在应用页面(a.com/app.html)中创建一个iframe,把其src指向数据页面(b.com/data.html)。
      数据页面会把数据附加到这个iframe的window.name上,data.html代码如下: <script type="text/javascript">    window.name = 'I was there!';    // 这里是要传输的数据,大小一般为2M,IE和firefox下可以大至32M左右                                     // 数据格式可以自定义,如json、字符串</script>
      在应用页面(a.com/app.html)中监听iframe的onload事件,在此事件中设置这个iframe的src指向本地域的代理文件(代理文件和应用页面在同一域下,所以可以相互通信)。app.html部分代码如下: <script type="text/javascript">    var state = 0,     iframe = document.createElement('iframe'),    loadfn = function() {        if (state === 1) {            var data = iframe.contentWindow.name;    // 读取数据            alert(data);    //弹出'I was there!'        } else if (state === 0) {            state = 1;            iframe.contentWindow.location = "http://a.com/proxy.html";    // 设置的代理文件        }      };    iframe.src = 'http://b.com/data.html';    if (iframe.attachEvent) {        iframe.attachEvent('onload', loadfn);    } else {        iframe.onload  = loadfn;    }    document.body.appendChild(iframe);</script>
    • 获取数据以后销毁这个iframe,释放内存;这也保证了安全(不被其他域frame js访问)。 <script type="text/javascript">    iframe.contentWindow.document.write('');    iframe.contentWindow.close();    document.body.removeChild(iframe);</script>

    总结起来即:iframe的src属性由外域转向本地域,跨域数据即由iframe的window.name从外域传递到本地域。这个就巧妙地绕过了浏览器的跨域访问限制,但同时它又是安全操作。

    分享到: QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
    分享分享0 收藏收藏0 支持支持0 反对反对0 分享到人人 转发到微博
    [img=http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=fRUcHhYWGAQ9GxIFEBwUEVMeEhA]http://rescdn.qqmail.com/zh_CN/htmledition/images/function/qm_open/ico_mailme_02.png[/img]

    使用道具 举报

    您需要登录后才可以回帖 登录 | 注册 人人连接登陆

    晴云孤魂's Blog|就爱编程搜帖|手机版|Archiver|就爱编程论坛     

    GMT+8, 2025-7-3 18:36 , Processed in 0.129725 second(s), 27 queries .

    Powered by Discuz! X2

    © 2001-2011 Comsenz Inc.

    回顶部