window.name跨域
window.name?
每一个页面都有一个自己的window,而window.name是window的名字。
window.name跨域原理
window对象有个name属性,该属性有个特征:即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个 window.name的,每个页面对window.name都有读写的权限,window.name是持久存在一个窗口载入过的所有页面中的,并不会因 新页面的载入而进行重置。
即我们在"http://www.baidu.com"页面的控制台设置window.name = "name=123",然后我们在控制台修改window.location.href = "http://www.youku.com",跳转页面后我们在控制台打印window.name,我们发现结果为我们刚才设置的'name=123'
利用此原理我们可以利用window.name来传递信息,且window.name可传递的信息量为2M,足够使用了。
操作如下
比如我们想要在a.html页面获取data.html页面传递的信息
首先我们在htttp://www.example.com/data.com页面下添加如下代码:
<script>
// 将我们想传递的信息赋值到data.html页面的window.name上
window.name = "{"name":"lyl", "age": 18}";
</script>
然后我们如何修改data.html页面的window.href,将其改变我a.html呢?显然我们无法在data.html页面修改window.href,所以我们利用一个隐藏iframe将data.html页面嵌入到a.html页面中,让iframe作为一个代理人,让iframe去代替我们获取数据
虽然iframe能获取到data.html页面的数据,那a.html页面如何向iframe获取数据呢,直接获取?
但是a.html和iframe不同域,受同源策略的影响,我们无法直接获取,怎么办?
这时,聪明的你灵机一动,想着既然改变iframe页面location,该页面的window.name值不变,而且iframe.contentWindow代表iframe页面的window,此时的你默默的将iframe.contentWindow.href改为和a.html页面同源的,拿走数据后,带着莫名的笑意看我我们一群迷茫的愤青(O(∩_∩)O哈!)
a.html页面代码如下:
<script>
function getData(url) {
var iframe = document.createElement('iframe');
iframe.style.display = "none";
var state = 0;
iframe.onload = function () {
if(state === 1) {
var data = iframe.contentWindow.name;
console.log(data);
// 获取到数据后将隐藏的iframe去除
iframe.contentWindow.document.write('');
iframe.contentWindow.close();
document.removeChild(iframe);
}else if(state === 0) {
state = 1;
iframe.contentWindow.location.href = window.location.href;
}
} iframe.src = url;
document.body.appendChild(iframe);
}
</script>
参考
window.name跨域的更多相关文章
- window.name 跨域
跨域的由来 JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象.但是我们常常会遇到无法避免跨域的情况,如普通文章站点(article.xxx.com)需要评论,而评论站点却在chea ...
- JS window.name跨域封装
JS window.name 跨域封装 function CrossDomainName(target, agent, callback, security) { if (typeof target ...
- window.returnValue跨域传值问题[转]
主页面用window.showModalDialog的时候,如果直接打开其它系统的页面,这时候别人的页面在window.returnValue=1;这样返回值的时候,主页面是取不到返回值的,原因就是因 ...
- HTML5 window/iframe跨域传递消息 API
原文地址:HTML5′s window.postMessage API 在线示例:Using HTML5's window.postMessage(请打开控制台看日志) 原文日期: 2010年09月0 ...
- (二)文档请求不同源之window.name跨域
一.基本原理 window.name不是一个普通的全局变量,而是当前窗口的名字.这里要注意的是每个iframe都有包裹它的window,而这个window 是top window的子窗口,而它自然也有 ...
- (二)文档请求不同源之window.postMessage跨域
一.基本原理 HTML5为了解决跨域,引入了跨文档通信API(Cross-document messaging).这个API为window对象新增了一个window.postMessage方法,允许跨 ...
- window.name跨域实现
参考:window.name实现的跨域数据传输 有三个页面: a.com/app.html:应用页面. a.com/proxy.html:代理文件,一般是一个没有任何内容的html文件,需要和应用页面 ...
- window.name 跨域数据传输
通过window.name可以实现跨域数据传输. 要解决的功能: www.a.com/a.html 需要获取到 www.b.com/b.html页面内容的数据 需要3个页面 www.a.com/a. ...
- HTML5之worker开启JS多线程模式及window.postMessage跨域
worker概述 worker基本使用 window下的postMessage worker多线程的应用 一.worker概述 web worker实际上是开启js异步执行的一种方式.在html5之前 ...
随机推荐
- spark集群模式
1.配置集群主机免登陆,参考http://www.cnblogs.com/puroc/p/5996730.html2.修改/etc/hosts文件,增加所有主机名和IP的对应关系 3.修改spark- ...
- eclipse 遇关键字enum编译问题解决
今天公司系统升级 JDK1.4 到 JDK1.5, 结果工程在eclipse中编译不能通过: Enumeration enum = ………… 但是eclipse报错: Multiple markers ...
- 关于JAVA编译时找不到自定义包的问题
这两天照网上的教程,学习JSP/SERVLET/JAVABEAN,写了几个JAVA文件,目录放在TOMCAT的WEBAPPS下面,通过javac编译时,老提示找不到指定的包: 下图是我的目录路径: 通 ...
- 009android初级篇之APP中使用系统相机相册等集成应用
android应用中使用相机功能,大致有两种方式实现: 直接调用系统内部的相机程序,显示的也是系统预设的界面(简单,只有简单的拍照功能): 自己去implement一个相机程序(不难,较具备弹性,但相 ...
- python3----strip lstrip rstrip
Python中的strip用于去除字符串的首位字符,同理,lstrip用于去除左边的字符,rstrip用于去除右边的字符.这三个函数都可传入一个参数,指定要去除的首尾字符.注意的是,传入的是一个字符数 ...
- python urllib2/urllib实现
urllib2和urllib是Python中的两个内置模块,要实现HTTP功能,实现方式是以urllib2为主,urllib为辅 urllib2提供一个基础函数urlopen,通过向指定的url发出请 ...
- PDP2
1. 程序入口 配置文件config.xml中: 2. index.html中显示,引入的cordova.js 就说明了 cordova apps 3. 看 main.ts
- EasyNVR摄像机网页无插件直播使用过程中问题的自我排查-设备不在线问题的自我排查
系列背景 由于EasyNVR的受众越来越多,时长会遇到很对类似的问题咨询,之前虽然有写过很多的博文进行技术的或者使用问题的解答,随着客户询问的增多,我发现,要想然客户了解问题和解决问题,往往引导和给一 ...
- Dictionary——通过value找Key
Dictionary<string, string> dic = GetRoleDescriptions(); string key = dic.FirstOrDefault(x => ...
- Qt里的原子操作QAtomicInteger
所谓原子操作,即一系列复杂的操作能一气呵成,中间不被其他的操作打断.这在多线程程序中尤其常见,但要实现这种功能,既要考虑程序的良好设计,又要关心特定平台的体系结构和相关编译器对原子特性的支持程度.所以 ...