javascript跨域总结之window.name实现的跨域数据传输

自己实践了一下，真的很好用。特将具体实现方法记录如下

有三个页面：

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

赞 (0)

相关推荐

  • 利用window.name实现windowStorage代码分享

    复制代码 代码如下: //key:value|key:valuevar windowStorage = {    _inited: false,    _data: {},    init: function(str) {        var tmpData, key, value, kv;        this._inited = true;        if (str && typeof str == 'string') {            tmpData = str.sp

  • window.name代替cookie的实现代码

    复制代码 代码如下: <script type="text/javascript"> var ye=1; if(window.name=="" || window.name==null){ window.name=ye; alert(1); } else{ window.name++; } </script>

  • javascript使用window.name解决跨域问题第1/2页

    window.name 传输技术,原本是 Thomas Frank 用于解决 cookie 的一些劣势(每个域名 4 x 20 Kb 的限制.数据只能是字符串.设置和获取 cookie 语法的复杂等等)而发明的(详细见原文:<Session variables without cookies>),后来 Kris Zyp 在此方法的基础上强化了 window.name 传输 ,并引入到了 Dojo(dojox.io.windowName),用来解决跨域数据传输问题.window.name 传输技

  • javascript跨域总结之window.name实现的跨域数据传输

    自己实践了一下,真的很好用.特将具体实现方法记录如下 有三个页面: a.com/app.html:应用页面.     a.com/proxy.html:代理文件,一般是一个没有任何内容的html文件,需要和应用页面在同一域下.     b.com/data.html:应用页面需要获取数据的页面,可称为数据页面. 实现起来基本步骤如下: 在应用页面(a.com/app.html)中创建一个iframe,把其src指向数据页面(b.com/data.html).     数据页面会把数据附加到这个i

  • Ajax解决跨域之设置CORS响应头实现跨域案例详解

    Ajax解决跨域之设置CORS响应头实现跨域案例详解

    1.设置CORS响应头实现跨域 跨源资源共享(CORS) 1.1 什么是CORS CORS(Cross-Origin Resource Sharing),跨域资源共享.CORS 是官方的跨域解决方 案,它的特点是不需要在客户端做任何特殊的操作,完全在服务器中进行处理,支持 get 和 post 请求.跨域资源共享标准新增了一组 HTTP 首部字段,允许服务器声明哪些 源站通过浏览器有权限访问哪些资源 1.2 CORS 怎么工作的? CORS 是通过设置一个响应头来告诉浏览器,该请求允许跨域,浏览

  • Window server 2012 R2 AD域的组策略设置步骤

    Window server 2012 R2 AD域的组策略设置步骤

    1.AD域的组策略添加有助于管理AD域中的用户使用的client端的环境. 2.组策略依附于AD域的OU构成 3.使用“gpmc.msc”在运行里面打开,或者是在“开始—管理工具”里面打开 4.在打开的组策略管理界面里面,林kaka下的DefaultDomain Policy为全局策略,而只对计算机做了配置. 一.简单组策略的建立实现: 来做一个实例说明组策略的简单实现: 要求:更改行政部门的用户 popo 在登录后的浏览器主页锁定为:www.baidu.com 则实现步骤如下所示: 1.首先在

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

    一. window.name的性质 window.name有一个奇妙的性质,页面如果设置了window.name,那么在不关闭页面的情况下,即使进行了页面跳转location.href=...,这个window.name还是会保留. 我们可以在控制台做一下实验: // 打开浏览器输入URL:www.jb51.net //F12打开控制台 //在控制台中依次输入下面内容 //输入 window.name; //返回 '' //输入 window.name='test'; //返回 'test' /

  • javascript学习笔记(十四) window对象使用介绍

    1.窗口位置 以下取得浏览器窗口距屏幕左边和上边的位置 复制代码 代码如下: var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX; //左边位置 var topPos = (typeof window.screenTop == "number") ? window.screenTop : window.screenY; //上边位置 2.浏

  • JavaScript的document对象和window对象详解

    [document对象] 该对象是window和frames对象的一个属性,是显示于窗口或框架内的一个文档. 属性 alinkColor 活动链接的颜色(ALINK) anchor 一个HTMI锚点,使用<A NAME=>标记创建(该属性本身也是一个对象) anchors array 列出文档锚点对象的数组(<A NAME=>)(该属性本身也是一个对象) bgColor 文档的背景颜色(BGCOLOR) cookie 存储于cookie.txt文件内的一段信息,它是该文档对象的一个

  • javascript表单验证和Window详解

    一.表单验证form 1.创建一个新的表单: 复制代码 代码如下: <form id="id是唯一的,不可重复" name="可重复",method="post/get",action="目标或地址,负责处理的服务端,将文本等传输到什么地方"> //方法1:post提交后无长度限制,且编码后内容不可见. //方法2:get提交有长度限制,并且编码后的内容在地址栏可见 (input 元素) </form>

  • IE中的File域无法清空使用jQuery重设File域

    有时候在做文件上传的时候会遇到一种情况就是需要重置整个表单,但是问题来了,其他浏览器都没啥问难题,直接reset form或者是触发type为reset的button的click事件就OK了,但是IE却奇葩了,IE中的File域无法清空,可能你看到的是已经没有值了,但是你可以打印出来看看就知道了: 复制代码 代码如下: var fileVal = $('input[type="file"]').val(); alert(fileVal); 打印出来的还是reset前选择的文件的信息,这

  • Javascript 跨域访问解决方案

    这里分两类情况:一.基于同一父域的子域之间页面的访问:参见如下3个domain域:taobao.com.jipiao.taobao.com.promotion.taobao.com:它们有相同的父域taobao.com.二.基于不同父域页面之间的访问:参见如下3个domain域:taobao.com.baidu.com.sina.com.cn:它们具有不同的父域. 解决它们之间跨域的方案有:方案1:服务器Proxy域A的页面JS需要访问域B下的链接获取数据,该方案在域A的服务器端建立一个Prox

  • javascript跨域方法、原理以及出现问题解决方法（详解）

    javascript跨域方法、原理以及出现问题解决方法（详解）

    javascript跨域访问是web开发者经常遇到的问题,什么是跨域,一个域上加载的脚本获取或操作另一个域上的文档属性,下面将列出三种实现javascript跨域方法: 1.基于iframe实现跨域 基于iframe实现的跨域要求两个域具有aa.xx.com,bb.xx.com这种特点,也就是两个页面必须属于一个基础域(例如都是xxx.com,或是xxx.com.cn),使用同一协议(例如都是 http)和同一端口(例如都是80),这样在两个页面中同时添加document.domain,就可以实

随机推荐