详解　

　　前文提到用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值，一切似乎水到渠成，代码如下：

  <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 解决跨域问题
可能是史上最详细的 underscore 源码剖析：https://github.com/hanzichi/underscore-analysis
程序员都应该学点算法：https://github.com/hanzichi/leetcode
了解博主韩子迟：http://www.cnblogs.com/zichi/p/about.html
GitHub：https://github.com/hanzichi Follow 楼主给楼主更多写作的动力~

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

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

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

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

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

  3. 解决Iframe跨域高度自适应,利用window.postMessage()实现跨域消息传递页面高度（JavaScript）

    在iframe跨域引用高度自适应这块写的js方式都试了不管用,最终使用的是window.postMessage() 跨域获取高度 传递信息 1.首先,在主页面上使用iframe引入子页面:也就是A.h ...

  4. Window下PHP三种运行方式图文详解,window下的php是不是单进程的？

    Window下PHP三种运行方式图文详解,window下的php是不是单进程的? PHP运行目前为止主要有三种方式: a.以模块加载的方式运行,初学者可能不容易理解,其实就是将PHP集成到Apache ...

  5. 利用rtklib处理GPS以及北斗数据详解

    利用rtklib开源代码处理GPS以及北斗数据详解 在GNSS领域最基础的工作是这些GNSS系统的定位工作,对于绝大多数研究者,自己着手完成这些工作是一个"鸡肋":完全独立设计的话 ...

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

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

  7. PHP下ajax跨域的解决方案之window.name

    原理核心:window对象的name属性是一个很特别的属性,当该window的location变化,然后重新加载,它的name属性可以依然保持不变. 依此原理,我们可以在页面A中用iframe加载其他 ...

  8. PHP下ajax跨子域的解决方案之document.domain+iframe

    对于主域相同,子域不同,我们可以设置相同的document.domain来欺骗浏览器,达到跨子域的效果.   例如:我们有两个域名:www.a.com 和 img.a.com 在www.a.com下有 ...

  9. Asp.NetMVC利用LigerUI搭建一个简单的后台管理详解（函登录验证）

    上一篇 Asp.Net 中Grid详解两种方法使用LigerUI加载数据库数据填充数据分页  了解了LigerUI 中Grid的基本用法  现在结合上一篇的内容做一个简单的后台管理,当然也有前台的页面 ...

随机推荐

  1. m2014-architecture-webserver->百万记录级mysql数据库及Discuz！论坛优化

    作者:shunz,出处:http://shunz.net/2008/06/mysql_discuz_.html 最近,帮一个朋友优化一个拥有20万主题,100万帖子,3万多会员,平均在线人数2000人 ...

  2. Spring事务核心接口

  3. Window PHP 使用命令行模式

    电脑系统: win7 php环境: phpstudy 1 把php目录放到环境变量path下面: 我的电脑->属性->高级->环境变量->系统变量->Path->编 ...

  4. java三方---->html解析jsoup的使用

    jsoup 是一款 Java 的HTML 解析器,可直接解析某个URL地址.HTML文本内容.它提供了一套非常省力的API,可通过DOM,CSS以及类似于JQuery的操作方法来取出和操作数据.今天我 ...

  5. java Log4j封装，程序任何位置调用

    一般写log4j,每个类都会定义一个logger 明显这样太麻烦了, 然后封装了一下,明显好用多了. package tools; import java.io.IOException; import ...

  6. Ubuntu adb devices :???????????? no permissions (verify udev rules) 解决方法

    Ubuntu adb devices :???????????? no permissions (verify udev rules) 解决方法http://www.cnblogs.com/cat-l ...

  7. ubuntu14.04 LTS 搜狗输入法安装和不能输入中文的解决方法

    搜狗输入法安装 1.首先通过Ubuntu软件中心,需要安装:fcitx https://pinyin.sogou.com/linux/help.php 2.然后再安装搜狗输入法包 https://pi ...

  8. serializeArray()与serialize()的区别

    serialize()序列化表单元素为字符串,用于 Ajax 请求. serializeArray()序列化表单元素为JSON数据. <script type="text/javasc ...

  9. CentOS配置bond

    Bonding的模式一共有7种: #defineBOND_MODE_ROUNDROBIN       0   (balance-rr模式)网卡的负载均衡模式 #defineBOND_MODE_ACTI ...

  10. sql语句查询条件的不同表达方式对查询性能的影响

    今天操作数据库遇到一个问题 目标表RA_AD_DAILY_DATA的数据量大概有5千万左右,其中的BUSINESS_DATE字段为日期类型 我要查询8月20号导入的三条记录,刚开始用这种方式去查: S ...