跨域解决方法之window.name
window对象有一个name属性,该属性有一个特征:即在一个窗口的生命周期内,窗口载入的所有的页面都是共享一个window.name的,每一个页面对window.name都有读写的权限,window.name是持久的存在于一个窗口载入的所有页面中的,并不会因为新的页面的载入而被重置。
下面为a.html中代码:
<script>
window.name = '我是页面a中设置的值';
setInterval(function(){
window.location = 'b.html';
},2000)//两秒后把一个新页面b.html载入到当前的window中
</script>
b.html中的代码
<script>
console.log(window.name);//读取window.name的值
</script>
上诉代码形成的效果就是:a.html页面载入2s后,跳转到b.html页面,b.html会在控制台输出‘我是页面a中设置的值’;
我们可以看到b.html页面上成功输出了a.html页面中设置的window.name的值,如果在之后所有载入的页面都没对window.name进行修改的话,那么所有的这些页面获取到的window.name的值都是a.html页面中设置的那个值;
不过要注意的是:window.name的值只能是字符串的形式,这个字符串的大小最大只能允许2M左右,具体取决于不同的浏览器,但是一般是够用了。
上面的例子中,我们用到的页面a.html和b.html是处于同一个域的,但是即使a.html与b.html处于不同的域中,上述结论同样是适用的,这也正是利用window.name进行跨域的原理;
实例说明:下面就来看一看具体是如何通过window.name来跨域获取数据的;
比如有一个www.example.com/a.html页面。需要通过a.html页面里的js来获取另一个位于不同域上的页面www.cnblogs.com/data.html中的数据。
data.html页面中的设置一个window.name即可,代码如下:
<script>
window.name = "我是data.html中设置的a页面想要的数据";
</script>
那么接下来问题来了,我们怎么把data.html页面载入进来呢,显然我们不能直接在a.html页面中通过改变window.location来载入data.html页面(因为我们现在需要实现的是a.html页面不跳转,但是也能够获取到data.html中的数据);
具体的实现其实就是在a.html页面中使用一个隐藏的iframe来充当一个中间角色,由iframe去获取data.html的数据,然后a.html再去得到iframe获取到的数据。
充当中间人的iframe想要获取到data.html中通过window.name设置的数据,只要要把这个iframe的src设置为www.cnblogs.com/data.html即可,然后a.html想要得到iframe所获取到的数据,也就是想要得到iframe的widnow.name的值,还必须把这个iframe的src设置成跟a.html页面同一个域才行,不然根据同源策略,a.html是不能访问到iframe中的window.name属性的。
以下为a.html中的代码:
<body>
<iframe id="proxy" src="http://www.cnblogs.com/data.html" style="display: none;" onload = "getData()"> <script>
function getData(){
var iframe = document.getElementById('proxy);
iframe.onload = function(){
var data = iframe.contentWindow.name;
//上述即为获取iframe里的window.name也就是data.html页面中所设置的数据;
}
iframe.src = 'b.html';
}
</script>
</body>
最新文章
- 【Net跨平台第一步】逆天带你零基础Linux入门【更新完毕】
- 在多线程并发请求Api的场景中,如何控制每个线程的qps
- android api sdk
- 独立博客开张!有关读书、GTD和IT方面的内容将发布在新网站上
- MyBatis入门(七)---逆向工程
- hdu 携程全球数据中心建设 (球面距离 + 最小生成树)
- 一天一个Java基础——对象和类
- mysql视图和存储过程定义者修改脚本(懒人专用)
- java学习面向对象之父子构造函数初始化
- 201521123091 《Java程序设计》第12周学习总结
- git 删除分支操作
- sql 生成随机字符串
- EasyUI ComboGrid 笔记(支持分页)
- 数据挖掘---Numpy的学习
- LVM : 缩减文件系统的容量
- Linux命令:查看文件内容cat|tac|more|less|head|tail|nl|od
- laravel 5.5 《电商实战 》基础布局
- VIM打开shell脚本中文乱码解决
- 6.006 Introduction to Algorithms
- 【淘宝客】批量提取QQ号
热门文章
- hdu1166 敌兵布阵 (线段树单点更新)
- win7 SP1 原版 32位 百度网盘下载
- pycharm 代码无法自动补全(自动顺带)的解决方法
- Docker Machine 管理-管理machine(17)
- Python文件操作生成csv及其他存储类型
- Findwind() Enumwindow()
- 20140919 进程间通信 系统栈 用户栈 多级反馈队列 windows 内存管理
- 制作 macOS High Sierra U盘
- js数组去重练习
- Codeforces542E Playing on Graph 思维+DFS+BFS