iframe 跨域问题解决方案 利用window.name+iframe跨域获取数据详解
详解
前文提到用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>
总结
能使用这种方式跨域，有几个条件必不可少。
- iframe标签的跨域能力
- 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';代替也是可以输出结果的，聪明的你知道区别吗？
参考
程序员都应该学点算法：https://github.com/hanzichi/leetcode
了解博主韩子迟：http://www.cnblogs.com/zichi/p/about.html
GitHub：https://github.com/hanzichi Follow 楼主给楼主更多写作的动力~
iframe 跨域问题解决方案 利用window.name+iframe跨域获取数据详解的更多相关文章
- 利用window.name+iframe跨域获取数据详解
详解 前文提到用jsonp的方式来跨域获取数据,本文为大家介绍下如何利用window.name+iframe跨域获取数据. 首先我们要简单了解下window.name和iframe的相关知识.ifra ...
- 利用location.hash+iframe跨域获取数据详解
前言 如果看懂了前文利用window.name+iframe跨域获取数据,那么此文也就很好理解了.一样都是动态插入一个iframe,然后把iframe的src指向服务端地址,而服务端同样都是输出一段j ...
- 解决Iframe跨域高度自适应,利用window.postMessage()实现跨域消息传递页面高度（JavaScript）
在iframe跨域引用高度自适应这块写的js方式都试了不管用,最终使用的是window.postMessage() 跨域获取高度 传递信息 1.首先,在主页面上使用iframe引入子页面:也就是A.h ...
- Window下PHP三种运行方式图文详解,window下的php是不是单进程的？
Window下PHP三种运行方式图文详解,window下的php是不是单进程的? PHP运行目前为止主要有三种方式: a.以模块加载的方式运行,初学者可能不容易理解,其实就是将PHP集成到Apache ...
- 利用rtklib处理GPS以及北斗数据详解
利用rtklib开源代码处理GPS以及北斗数据详解 在GNSS领域最基础的工作是这些GNSS系统的定位工作,对于绝大多数研究者,自己着手完成这些工作是一个"鸡肋":完全独立设计的话 ...
- 利用window.name+iframe跨域获取接口数据
最近做了一个表单广告,需要从接口读取数据,做完发现谷歌火狐下正常,360兼容和IE浏览器无法获取数据,以下是鲜明的对比: 调试发现报错了: 然后开发把接口改成支持windowname,一开始 ...
- PHP下ajax跨域的解决方案之window.name
原理核心:window对象的name属性是一个很特别的属性,当该window的location变化,然后重新加载,它的name属性可以依然保持不变. 依此原理,我们可以在页面A中用iframe加载其他 ...
- PHP下ajax跨子域的解决方案之document.domain+iframe
对于主域相同,子域不同,我们可以设置相同的document.domain来欺骗浏览器,达到跨子域的效果. 例如:我们有两个域名:www.a.com 和 img.a.com 在www.a.com下有 ...
- Asp.NetMVC利用LigerUI搭建一个简单的后台管理详解（函登录验证）
上一篇 Asp.Net 中Grid详解两种方法使用LigerUI加载数据库数据填充数据分页 了解了LigerUI 中Grid的基本用法 现在结合上一篇的内容做一个简单的后台管理,当然也有前台的页面 ...
随机推荐
- CMS3.0——初次邂逅express
前言: 刚接手cms3.0的工作,似乎对一切都那么的不熟悉,于是在开始新需求之前,先做一个简单的登录系统. 项目目录: 1.使用webstroms建expreess项目,非常方便简单,建好的项目目录就 ...
- Discuz 升级X3问题汇总整理
最近一段时间公司的社区垃圾帖数量陡然上涨,以至于社区首页的推荐版块满满都是垃圾帖的身影,为了进一步解决垃圾帖问题我们整整花了1天时间删垃圾贴,清除不良用户,删的手都酸了,可见垃圾帖的数量之多!可耻的刷 ...
- 盒子模型 W3C中和IE中盒子的总宽度分别是什么
W3C盒模型 总宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margi ...
- Bootstrap篇：弹出框和提示框效果以及代码展示
前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你 ...
- 深入浅出Docker（三）：Docker开源之路
背景 Docker从一开始的概念阶段就致力于使用开源驱动的方式来发展,它的成功缘于国外成熟的开源文化氛围,以及可借鉴的社区运营经验.通过本文详细的介绍,让大家可以全面了解一个项目亦或者一项技术是如何通 ...
- java.util.ConcurrentModificationException 多线程访问ArrayList引起
http://blog.csdn.net/androiddevelop/article/details/21509345 Java ConcurrentModificationException ...
- vux 局部注册组件
在home.vue里面,引入Prop.vue组件: 其中 <child :message="msg"></child>的时候 是这么赋值的: data () ...
- 超级小的web手势库AlloyFinger
针对多点触控设备编程的Web手势组件,快速帮助你的web程序增加手势支持,也不用再担心click 300ms的延迟了.拥有两个版本,无依赖的独立版和react版本.除了Dom对象,也可监听Canvas ...
- 强连通分量+缩点（poj2553）
http://poj.org/problem?id=2553 The Bottom of a Graph Time Limit: 3000MS Memory Limit: 65536K Total ...
- Linux系统下 Supervisor 安装搭建(yum安装)
安装Supervisor # 安装supervisor yum install supervisor # 打开supervisor的配置文件 vi /etc/supervisord.conf 将sup ...