详解　

　　前文提到用jsonp的方式来跨域获取数据，本文为大家介绍下如何利用window.name+iframe跨域获取数据。

　　首先我们要简单了解下window.name和iframe的相关知识。iframe是html的一个标签，可以在网页中创建内联框架，有个src属性（指向文件地址，html、php等）可以选择内联框架的内容，可以看个例子（猛戳这里），大概了解下就行了。window.name（一般在js代码里出现）的值不是一个普通的全局变量，而是当前窗口的名字，这里要注意的是每个iframe都有包裹它的window，而这个window是top window的子窗口，而它自然也有window.name的属性，window.name属性的神奇之处在于name 值在不同的页面（甚至不同域名）加载后依旧存在（如果没修改则值不会变化），并且可以支持非常长的 name 值（2MB）。

　　跨域解决方案似乎可以呼之欲出了，假设index.html页面请求远端服务器的数据，我们在该页面下新建一个iframe标签，该iframe的src属性指向服务器文件地址（利用iframe标签的跨域能力)，服务器文件里设置好window.name的值（也就是该iframe的contentWindow的name值），然后在index.html里读取该iframe的window.name值，一切似乎水到渠成，代码如下：

<body>
  <script type="text/javascript">
    iframe = document.createElement('iframe'),
    iframe.src = 'http://localhost:8080/data.php';
    document.body.appendChild(iframe);
    iframe.onload = function() {
      console.log(iframe.contentWindow.name)
    };
  </script>
</body>
<?php
  echo '<script> window.name = "{\"name\":\"hanzichi\", \"age\":10}"; </script>'
?>

　　但是不幸的是，报错了..

　　提示啥协议、主机、端口三者要一致，这不是赤裸裸地告诉你跨域了么！为什么会这样，因为规定如果index.html页面和和该页面里的iframe框架的src如果不同源，则也无法操作框架里的任何东西，所以就取不到iframe框架的name值了，告诉你我们不是一家的，你也休想得到我这里的数据。既然要同源，那就换个src去指，前面说了无论怎样加载window.name值都不会变化，于是我们在index.html相同目录下，新建了个proxy.html的空页面，修改代码如下：

<body>
  <script type="text/javascript">
    iframe = document.createElement('iframe'),
    iframe.src = 'http://localhost:8080/data.php';
    document.body.appendChild(iframe);
    iframe.onload = function() {
      iframe.src = 'http://localhost:81/cross-domain/proxy.html';
      console.log(iframe.contentWindow.name)
    };
  </script>
</body>

　　理想似乎很美好，在iframe载入过程中，迅速重置iframe.src的指向，使之与index.html同源，那么index页面就能去获取它的name值了！但是现实是残酷的，iframe在现实中的表现是一直不停地刷新，也很好理解，每次触发onload时间后，重置src，相当于重新载入页面，又触发onload事件，于是就不停地刷新了（但是需要的数据还是能输出的）。修改后代码如下：

<body>
  <script type="text/javascript">
    iframe = document.createElement('iframe');
    iframe.style.display = 'none';
    var state = 0;

    iframe.onload = function() {
      if(state === 1) {
          var data = JSON.parse(iframe.contentWindow.name);
          console.log(data);
          iframe.contentWindow.document.write('');
          iframe.contentWindow.close();
        document.body.removeChild(iframe);
      } else if(state === 0) {
          state = 1;
          iframe.contentWindow.location = 'http://localhost:81/cross-domain/proxy.html';
      }
    };

    iframe.src = 'http://localhost:8080/data.php';
    document.body.appendChild(iframe);
  </script>
</body>

总结

　　能使用这种方式跨域，有几个条件必不可少。

  1. iframe标签的跨域能力
  2. window.name属性值在文档刷新后依旧存在的能力

　　再简单了解下window和contentWindow的一些知识。浏览器就会为原始文档创建一个 window 对象，再为每个框架（iframe）创建额外的 window 对象。这些额外的对象是原始窗口的子窗口，可能被原始窗口中发生的事件所影响。例如，关闭原始窗口将导致关闭全部子窗口。contentWindow属性是指指定的frame或者iframe所在的window对象。

使用方法

　　很多人或许只关注使用方法，而对原理不怎么感冒。此法相对于jsonp复杂，使用方法也更复杂些。

　　服务端一般输出一段js代码，例如下面这样：

<?php
  echo '<script> window.name = "{\"name\":\"hanzichi\", \"age\":10}"; </script>'
?>

　　window.name的值是字符串形式，也是需要传递给客户端的数据（当然如果有需要服务端也可以先处理传过来的数据，这里仅为只有数据回传），有需要自己再去解析（如字符串->json数据）。

　　index.html页面，我把方法封装成了函数：

<body>
  <script type="text/javascript">
    function crossDomain(url, fn) {
      iframe = document.createElement('iframe');
      iframe.style.display = 'none';
      var state = 0;

      iframe.onload = function() {
        if(state === 1) {
          fn(iframe.contentWindow.name);
          iframe.contentWindow.document.write('');
          iframe.contentWindow.close();
          document.body.removeChild(iframe);
        } else if(state === 0) {
          state = 1;
          iframe.contentWindow.location = 'http://localhost:81/cross-domain/proxy.html';
        }
      };

      iframe.src = url;
      document.body.appendChild(iframe);
    } 

    // 调用
    // 服务器地址
    var url = 'http://localhost:8080/data.php';
    crossDomain(url, function(data) { // 处理数据 data就是window.name的值(string)
      var data = JSON.parse(iframe.contentWindow.name);
      console.log(data);
    });
  </script>
</body>

　　这里还有一点小问题，ie的兼容（iframe的onload ie下似乎要用attachEvent，以及json对于ie的兼容），有兴趣的朋友自己去研究了（可以参考下参考文章）；另外proxy代理页面可以没有这个文件，会报404但是不影响功能（但是路径一定要和index页面同源）。

　　还有一点值得思考的是iframe的src重定向的时候，代码：

iframe.contentWindow.location = 'http://localhost:81/cross-domain/proxy.html';

　　这时iframe.src指向的还是服务端页面，这里的代码如果用iframe.src = 'http://localhost:81/cross-domain/proxy.html';代替也是可以输出结果的，聪明的你知道区别吗？

参考

  1. js中几种实用的跨域方法原理详解
  2. JS 使用window.name跨域实践
  3. 使用 window.name 解决跨域问题

利用window.name+iframe跨域获取数据详解的更多相关文章

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

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

  2. 利用location.hash+iframe跨域获取数据详解

    前言 如果看懂了前文利用window.name+iframe跨域获取数据,那么此文也就很好理解了.一样都是动态插入一个iframe,然后把iframe的src指向服务端地址,而服务端同样都是输出一段j ...

  3. 利用window.name+iframe跨域获取接口数据

    最近做了一个表单广告,需要从接口读取数据,做完发现谷歌火狐下正常,360兼容和IE浏览器无法获取数据,以下是鲜明的对比:      调试发现报错了: 然后开发把接口改成支持windowname,一开始 ...

  4. js中几种实用的跨域方法原理详解（转）

    今天研究js跨域问题的时候发现一篇好博,非常详细地讲解了js几种跨域方法的原理,特分享一下. 原博地址:http://www.cnblogs.com/2050/p/3191744.html 下面正文开 ...

  5. js中几种实用的跨域方法原理详解

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

  6. [转]js中几种实用的跨域方法原理详解

    转自:js中几种实用的跨域方法原理详解 - 无双 - 博客园 // // 这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同 ...

  7. js中几种实用的跨域方法原理详解【转】

    源地址:http://www.cnblogs.com/2050/p/3191744.html 这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通 ...

  8. 【转】js中几种实用的跨域方法原理详解

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

  9. jQuery之ajax的跨域获取数据

    如果获取的数据文件存放在远程服务器上(域名不同,也就是跨域获取数据),则需要使用jsonp类型.使用这种类型的话,会创建一个查询字符串参数 callback=? ,这个参数会加在请求的URL后面.服务 ...

随机推荐

  1. OOD原则汇总

    头五项原则是关于类设计的,它们是: ◆ SRP,单一职责原则,一个类应该有且只有一个改变的理由. ◆ OCP,开放封闭原则,你应该能够不用修改原有类就能扩展一个类的行为. ◆ LSP,Liskov替换 ...

  2. Effective Java 08 Obey the general contract when overriding equals

    When it's the case that each instance of the class is equal to only itself. 1. Each instance of the ...

  3. 【Android】 Android实现录音、播音、录制视频功能

    智能手机操作系统IOS与Android平分天下(PS:WP与其他的直接无视了),而Android的免费招来了一大堆厂商分分向Android示好,故Android可能会有“较好”的前景. Android ...

  4. Oracle 数据库二 基本查询

    查询当前用户:show user 查看当前用户下的表:select *from tab; 设置行宽: show linesize;(查看行宽)     set linesize 120;(设置行宽) ...

  5. Button未设type属性时在非IE6/7中具有submit特性

    代码如下 <!DOCTYPE html> <html> <head> <title>Button在Form中具有submit的特性</title& ...

  6. 获取tomcat上properties文件的内容——方便文件存储位置的修改，解耦和

    在java web开发的时候经常会用到读取读取或存放文件,这个文件的默认路径在哪里呢?写死在程序里面显然是可以的,但这样子不利于位于,假如有一天项目从window移植到linux,或者保存文件的路径变 ...

  7. oracle表连接——处理连接过程中另外一张表没有相关数据不显示问题

    一个数据表基本上很难满足我们的查询要求,同时,将所有的数据都保存在一个表格中显然也不是一种好的数据库设计,为了避免数据的冗余,删除.更新异常,我们通常需要建立一张外键表,通过表连接,来获取我们自己想要 ...

  8. Go

    一.简介 https://zh.wikipedia.org/wiki/Go 二.安装 1)低版本 http://blog.sina.com.cn/s/blog_59cc90640102xm8r.htm ...

  9. 《JavaScript修炼之道》读书笔记

    1.参考书目 入门:<JavaScript DOM编程艺术>第二版 进阶:<JavaScript高级程序设计>第二版.<JavaScript编程精粹> <Ja ...

  10. openfire+asmack搭建的安卓即时通讯（三） 15.4.9

    (能用得上话的话求点赞=-=,我表达不好的话跟我说哦) 上一次我们拿到了服务器端的组数据和用户信息,这就可以为我们日后使用好友系统打下基础了! 但是光是拿到了这些东西我们怎么能够满足呢?我们一个即时通 ...