首先了解一下window.name这个东西是什么。

name 在浏览器环境中是一个全局/window对象的属性,当在 frame 中加载新页面时,name 的属性值依旧保持不变 并且name 属性仅对相同域名的 frame 可访问。由此我们可以继续下面的问题。

有三个页面:

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

javascript跨域通信(二):window.name实现的跨域数据传输的更多相关文章

  1. 跨域解决方案二:使用JSONP实现跨域

    跨域的实现方式有多种,除了 上篇文章 提到的CORS外,常见的还有JSONP.HTML5.Flash.iframe.xhr2等. 这篇文章对JSONP的跨域原理进行了探索,并将我的心得记录在这里和大家 ...

  2. 使用 JSONP 实现跨域通信

    简介 Asynchronous JavaScript and XML (Ajax) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术.Ajax 允许在不干扰 Web 应用程序的 ...

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

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

  4. 【JavaScript】父子页面之间跨域通信的方法

    由于同源策略的限制,JavaScript跨域的问题,一直是一个比较棘手的问题,为了解决页面之间的跨域通信,大家煞费苦心,研究了各种跨域方案.之前也有小网同学分享过一篇“跨域,不再纠结” 开始照着尝试时 ...

  5. 使用window.postMessage实现跨域通信

    JavaScript由于同源策略的限制,跨域通信一直是棘手的问题.当然解决方案也有很多: document.domain+iframe的设置,应用于主域相同而子域不同: 利用iframe和locati ...

  6. 利用HTML5的window.postMessage实现跨域通信

    详见: http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp77   HTML5的window.postMessage简述 postM ...

  7. JavaScript系列----AJAX机制详解以及跨域通信

    1.Ajax 1.1.Ajax简介 Ajax简介这一部分我们主要是谈一下ajax的起源,ajax是什么?因为这些是跟技术无关的.所以,大多细节都是一笔带过. Ajax的起源? Ajax一词源于2005 ...

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

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

  9. 【13】javascript跨域通信

    javascript跨域通信 同源:两个文档同源需满足 协议相同 域名相同 端口相同 跨域通信方法: 01,通过设置img,script,link,iframe元素的src,href属性为目标url. ...

  10. Javascript使用postMessage对iframe跨域通信

    今天才发现原来有这么个好东西啊,跨域通信太方便了, 举个小栗子: 共两个页面, 页面1:www.a.com/a.html 页面2:www.b.com/b.html 实现目标:两个网站页面实现跨域相互通 ...

随机推荐

  1. spi_flash

    http://blog.chinaunix.net/uid-27406766-id-3384699.html

  2. html() 和 text() 方法的区别

    html()方法仅支持XHTML的文档,不能用于XML文档,而text()既支持HTML文档,也 支持XML文档. html():没有参数,用于获取html的值: html(val):有参数,用于设置 ...

  3. R--相关分布函数、统计函数的使用

    分布函数家族: *func()r : 随机分布函数d : 概率密度函数p : 累积分布函数q : 分位数函数 func()表示具体的名称如下表: 例子 #r : 随机分布函数 #d : 概率密度函数 ...

  4. Python:装饰器

    格式:在执行的参数前加上@functon 例1:传一个参数 #模拟验证功能 def login(auth): def fun(arg): #为了避免程序一执行的时候就执行验证,需要再加一层函数. pr ...

  5. PHP static关键字

    声明类成员或方法为static,就可以不实例化类而直接访问.不能通过一个对象来访问其中的静态成员(静态方法除外). 为了兼容PHP4,如果没有指定“可见性”,属性和方法默认为public. 由于静态方 ...

  6. linux 清理内存命令 查看内存命令

    查看内存: 我们可以用free命令查看内存信息: free -g total used free shared buffers cachedMem: 15   15    0     0       ...

  7. Pig Hive对比(zz)

    Pig Latin:数据流编程语言 一个Pig Latin程序是相对于输入的一步步操作.其中每一步都是对数据的一个简单的变换. 用Pig Latin编程更像在RDBMS中“查询规划器”(query p ...

  8. Unity3D 中 用quaternion 来对一个坐标点进行旋转的初步体会

    在unity3d中,用四元数来表示旋转,四元数英文名叫quaternion . 比如 transform.rotation 就是一个四元数,其由四个部分组成 Quaternion = (xi + yj ...

  9. C3P0连接池连接MySQL出现的问题

    1.Clearing pending acquires. While trying to acquire a needed new resource, we failed to succeed mor ...

  10. jsp_属性范围_session

    session属性设置后,不管是客户端跳转还是服务器端跳转,只要属性设置了就可以取得. 下面写个小例子来验证一下: (1)session_demo.jsp <%@ page contentTyp ...