关闭

window.name实现的跨域数据传输

7435人阅读 评论(0) 收藏 举报
分类:

这篇文章是对 JavaScript跨域总结与解决办法 的补充。

有三个页面:

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

实现起来基本步骤如下:

  1. 在应用页面(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>
  2. 在应用页面(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>
  3. 获取数据以后销毁这个iframe,释放内存;这也保证了安全(不被其他域frame js访问)。
    <script type="text/javascript">
        iframe.contentWindow.document.write('');
        iframe.contentWindow.close();
        document.body.removeChild(iframe);
    </script>

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

参考文章:window.name TransportSession variables without cookies使用 window.name 解决跨域问题利用window.name实现跨域访问的基本步骤克军写的样例

0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

window.name实现的跨域数据传输

这篇文章是对 JavaScript跨域总结与解决办法 的补充。 有三个页面: a.com/app.html:应用页面。 a.com/proxy.html:代理文件,一般是一个没有任何...
  • bao19901210
  • bao19901210
  • 2014-03-18 14:28
  • 7435

window.name 跨域实现原理及实例

先引用一段话: window.name 传输技术,原本是 Thomas Frank 用于解决 cookie 的一些劣势(每个域名 4 x 20 Kb的限制、数据只能是字符串、设置和获取 cooki...
  • qq_34099161
  • qq_34099161
  • 2016-11-08 14:30
  • 3225

window.name实现的跨域数据传输

看了园友的 window.name实现的跨域数据传输 自己实践了一下,真的很好用。 特将具体实现方法记录如下: 如a.com网站想通过JS获取b.com网站的数据。 1 在a.com网站添加一个空HT...
  • jzh440
  • jzh440
  • 2013-09-19 15:22
  • 4764

window.name实现的跨域数据传输

这篇文章是对 JavaScript跨域总结与解决办法 的补充。 有三个页面: a.com/app.html:应用页面。 a.com/proxy.html:代理文件,一般是一个没有任何内容的ht...
  • yangbbenyang
  • yangbbenyang
  • 2014-08-07 13:33
  • 168

window.name实现的跨域数据传输

转自:http://blog.csdn.net/bao19901210/article/details/21458001 这篇文章是对 JavaScript跨域总结与解决办法 的补充...
  • qq_21859119
  • qq_21859119
  • 2017-07-11 10:59
  • 72

window.name实现的跨域数据传输

如a.com网站想通过JS获取b.com网站的数据。 1 在a.com网站添加一个空HTML页。名称为:http://a.com/null.html 2 在a.com网站需要获取数据页面(如:http...
  • qq_22912891
  • qq_22912891
  • 2016-10-04 09:20
  • 72

window.name实现跨域数据传输

偶然间碰到个问题,通过JS给window.name赋值数组情况下,在firefox与chrome下会转换为字符串类型,在IE11下则显示正常。不说了,上图(firefox下):   代码: v...
  • xqg666666
  • xqg666666
  • 2015-03-22 13:17
  • 398

window.name实现的跨域数据传输

这篇文章是对 JavaScript跨域总结与解决办法 的补充。 有三个页面: a.com/app.html:应用页面。a.com/proxy.html:代理文件,一般是一个没有任何内容的h...
  • yyywyr
  • yyywyr
  • 2014-09-04 08:44
  • 624

window.name实现的跨域数据传输

这篇文章是对 JavaScript跨域总结与解决办法 的补充。 有三个页面: a.com/app.html:应用页面。a.com/proxy.html:代理文件,一般是一个没有任何内容的htm...
  • quxiantao
  • quxiantao
  • 2015-02-08 09:24
  • 185

window.name实现的跨域数据传输

转载至: http://www.cnblogs.com/rainman/archive/2011/02/21/1960044.html 这篇文章是对 JavaScript跨域总结与解...
  • wuyou1336
  • wuyou1336
  • 2017-02-07 22:44
  • 117
    个人资料
    • 访问:938337次
    • 积分:5465
    • 等级:
    • 排名:第5695名
    • 原创:33篇
    • 转载:144篇
    • 译文:0篇
    • 评论:84条
    文章分类
    最新评论