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

7864人阅读 评论(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实现跨域访问的基本步骤克军写的样例

查看评论

跨域解决方法之window.name

window.name 跨域请求 方法
  • u013558749
  • u013558749
  • 2017-02-24 23:54:25
  • 2419

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

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

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

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

利用window.name解决跨域问题

原文:http://www.alisdn.com/wordpress/?p=433之前在怿飞的博客上看到一篇关于window.name解决跨域问题的文章,给web前端的跨域问题提供了另外一种选择,但是...
  • x_yp
  • x_yp
  • 2011-03-22 18:29:00
  • 2887

七种跨域方法【6.window.name篇】

问题描述: 通过window.name方式 从本地http://localhost/a.html页面 去访问http://www.lamport.me/data.html的数据 如果该文件不能访问,你...
  • super_yang_android
  • super_yang_android
  • 2017-01-03 10:59:54
  • 385

window.name + iframe 实现跨域

window.name属性有这样的特点: 当前页设置的值, 在页面重新加载(非同域也可以)后, 值依然不变. 比如: window.name = 'abc'; window.name; // ab...
  • butterfly5211314
  • butterfly5211314
  • 2017-06-27 22:05:17
  • 255

window.name实现跨域请求

如a.com网站想通过JS获取b.com网站的数据。 1 在a.com网站添加一个空HTML页。名称为:http://a.com/null.html 2 在a.com网站需要获取数据页面(如:ht...
  • u012545279
  • u012545279
  • 2014-02-26 11:24:13
  • 1417

使用 window.name 解决跨域问题

window.name 传输技术,原本是 Thomas Frank 用于解决 cookie 的一些劣势(每个域名 4 x 20 Kb 的限制、数据只能是字符串、设置和获取 cookie 语法的复杂...
  • fengri5566
  • fengri5566
  • 2016-08-03 17:27:51
  • 5011

前端跨域解决方法之window.name+iframe

window.name 传输技术,原本是 Thomas Frank 用于解决 cookie 的一些劣势(每个域名 4 x 20 Kb 的限制、数据只能是字符串、设置和获取 cookie 语法的复杂等...
  • ghostlpx
  • ghostlpx
  • 2016-08-15 15:54:25
  • 3021

window.name解决跨域问题的文档

  • 2008年11月17日 16:16
  • 39KB
  • 下载
    个人资料
    持之以恒
    等级:
    访问量: 123万+
    积分: 6329
    排名: 4839
    最新评论