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

代码:

<script type="text/javascript">
var name = [1,2,3];
console.log(typeof name);
console.log(name.length);
for(var i in name){
console.log(name[i]);
}
</script>

google了一下,发现可以通过window.name属性实现数据的跨域传输。

有三个页面:

  • 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从外域传递到本地域。这个就巧妙地绕过了浏览器的跨域访问限制,但同时它又是安全操作。

原文摘自:http://www.cnblogs.com/rainman/archive/2011/02/21/1960044.html

window.name实现跨域数据传输的更多相关文章

  1. window.name实现的跨域数据传输 JavaScript跨域总结与解决办法

    原文地址:  http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html#m4 什么是跨域 1.document.domain+ifr ...

  2. window.name 跨域数据传输

    通过window.name可以实现跨域数据传输. 要解决的功能:  www.a.com/a.html 需要获取到 www.b.com/b.html页面内容的数据 需要3个页面 www.a.com/a. ...

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

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

  4. 利用window.name+iframe跨域获取数据详解

    详解 前文提到用jsonp的方式来跨域获取数据,本文为大家介绍下如何利用window.name+iframe跨域获取数据. 首先我们要简单了解下window.name和iframe的相关知识.ifra ...

  5. iframe 跨域问题解决方案 利用window.name+iframe跨域获取数据详解

    详解 前文提到用jsonp的方式来跨域获取数据,本文为大家介绍下如何利用window.name+iframe跨域获取数据. 首先我们要简单了解下window.name和iframe的相关知识.ifra ...

  6. window.name实现跨域

    在 http://www.cnblogs.com/zhuzhenwei918/p/6759459.html 这篇文章中,我提到了几种跨域的方式,这里主要讲解使用window.name实现跨域. 跨域就 ...

  7. 使用ADMT和PES实现window AD账户跨域迁移-介绍篇

    使用 ADMT 和 pwdmig 实现 window AD 账户跨域迁移系列: 介绍篇 ADMT 安装 PES 的安装 ADMT:迁移组 ADMT:迁移用户 ADMT:计算机迁移 ADMT:报告生成 ...

  8. javascript跨域通信(二):window.name实现的跨域数据传输

    首先了解一下window.name这个东西是什么. name 在浏览器环境中是一个全局/window对象的属性,当在 frame 中加载新页面时,name 的属性值依旧保持不变 并且name 属性仅对 ...

  9. JavaScript 跨域:window.postMessage 实现跨域通信

    JavaScript 跨域方式实现方式有很多,之前,一篇文章中提到了 JSONP 形式实现跨域.本文将介绍 HTML5 新增的 api 实现跨域:window.postMessage . 1 othe ...

随机推荐

  1. 为何url地址不是直接发送到服务器,而是被编码后再发送

    首先,先说一下,关于为何必须将url地址,去编码后,再发送,是因为相关的协议规范:RFC 1738,定义了url地址中不能包含除了0-9的数字,大小写字母(a-zA-Z),短横线’-‘ 之外的字母.换 ...

  2. DB2—alter追加/删除/重置column操作

    DB2—alter追加/删除/重置column操作   1.添加字段   alter table 表名称 add 字段名称 类型   Demo: 1 alter table table_name  a ...

  3. Delphi 7 在程序中直接执行SQL脚本文件

    Delphi 7 在程序中直接执行SQL脚本文件 在处理MSDE一些操作中.需要执行一些SQL脚本.有的是从SQLServer 2000中生成的SQL为后缀的脚本.在MSDE中没有企业管理器,操作都是 ...

  4. Python的网络编程[5] -> BOOTP + TFTP + FTP -> 实现一个简单的文件传输流程

    BOOTP-TFTP-FTP 目录 文件传输流程 服务器建立过程 客户端建立过程 1 文件传输流程 / File Transfer Flow 利用BOOTP,TFTP,FTP三种传输协议,建立起客户端 ...

  5. spoj 375 Query on a tree (树链剖分)

    Query on a tree You are given a tree (an acyclic undirected connected graph) with N nodes, and edges ...

  6. Java-静态代码块,构造代码块,构造函数

    静态代码块:用staitc声明,jvm加载类时执行,仅执行一次 构造代码块:类中直接用{}定义,每一次创建对象时执行. 执行顺序优先级:静态块, main(),函数,构造块,构造方法. 构造函数 pu ...

  7. [POI2014]FarmCraft

    题目大意: 一个$n(n\le5\times10^5)$个点的树,每个点有一个权值$c_i$,从$1$出发进行欧拉遍历,每个单位时间移动一条边,记每个点$i$被访问到的时间是$t_i$,问最后$\ma ...

  8. lor实践

    1.启动一个nginx监听8888端口, -p 指定工作目录 -c 指定加载配置文件 在nginx.conf中,写一个server,进入lor项目的入口文件main.lua 2.main.lua执行r ...

  9. SONY的一款Win8平板

    今天看到了SONY新发布的一款x86的平板电脑: 铝合金的机身,分离的屏幕,非常漂亮.参数上还是很给力的,i5-4210/i7-4610的处理器,1920x1080的屏幕.4G的内存.9.9mm的厚度 ...

  10. A system tap script to detect UDP beacons

    https://gist.github.com/jbradley89/178bbf3944786c494bd78f3df16a5472