详解　

　　前文提到用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. Django里面是文件静态化的方法

    看Django官网的时候,由于自己的英语基础较差,而实现的谷歌翻译比较烂,只能看懂个大概.在文件静态化的时候,讲的比较繁琐一点,没怎么看懂,遂询问了一下其他人,明白了许多,但是细节需要注意的地方特别多 ...

  2. UITextView和UITextField的placeholder，键盘隐藏，键盘换行变完成字样

    本文转载至 http://blog.csdn.net/hengshujiyi/article/details/9086093- (void)initFeedBackViews { //设置页面的背景颜 ...

  3. click() bind() live() delegate()区别

    click(),bind(),live()都是执行事件时使用的方法 1.click()单击事件方法: $("a").click(function() { alert("h ...

  4. Intel产品AMT本地及远程提权漏洞（CVE-2017-5689）复现 【转载自freebuf.com】

    零.绪论: 1.鸣谢freebuf的文章,主要是学习这个漏洞,文章地址: Intel产品AMT本地及远程提权漏洞(CVE-2017-5689)复现 2.在shadon上找了多个该漏洞尝试复现失败(评论 ...

  5. pvm虚拟机基本原理

    零.绪论:特别鸣谢下文博客,自己博客是对这篇博客的学习笔记: 大佬webber博客:https://www.cnblogs.com/webber1992/p/6597166.html 一.三种文件: ...

  6. 从SVN一键对比版本

    公司的部署程序太多,每次部署安装完后,还得从SVN上对比版本,手工做实在太麻烦. 比如下面的一个版本 思路: 将需要检查的部件及安装的位置.SVN相关信息写入配置文件,然后程序读取配置文件 配置文件内 ...

  7. 封装自己的getClassName函数

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. MyBatis DAO层传递参数到mapping.xml 几种方式

    Dao层传递参数到mapping.xml文件的几种方式:(Mybatis传值总结) 第一种:传递单个参数 Dao层Code片段: /** * 根据articleId查询XXXX详情. * * @par ...

  9. 170505、MySQL的or/in/union与索引优化

    假设订单业务表结构为: order(oid, date, uid, status, money, time, …) 其中: oid,订单ID,主键 date,下单日期,有普通索引,管理后台经常按照da ...

  10. Yii2中省市三级联动（栏目联动）

    先从表的设计开始: 表的结构: CREATE TABLE `global_region` ( `region_id` smallint(5) unsigned NOT NULL AUTO_INCREM ...