(二)文档请求不同源之window.name跨域
一、基本原理
window.name不是一个普通的全局变量，而是当前窗口的名字。这里要注意的是每个iframe都有包裹它的window，而这个window 是top window的子窗口，而它自然也有window.name的属性，window.name在不同的页面（甚至不同域名）加载后依旧存在（如果没修改则值不会变化），并且可以支持非常长的name值（2MB）。
二、测试步骤
在某个页面控制台输入
window.name = "Hello World";
window.location = "http://www.baidu.com";
页面跳转到了百度首页，但是window.name却被保存了下来，还是 Hello World。
1、创建a.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>window.name解决跨域a.html</title>
</head>
<body>
<script>
let data = '';
const ifr = document.createElement('iframe');
ifr.src = "http://localhost:8081/b.html";
ifr.style.display = 'none';
document.body.appendChild(ifr);
ifr.onload = function() {
ifr.onload = function() {
data = ifr.contentWindow.name;
console.log('收到数据:', data);
}
ifr.src = "http://localhost:8080/c.html";
}
</script>
</body>
</html>
2、创建b.html
<script>
window.name = "你想要的数据!";
</script>
http://localhost:8080/a.html在请求远端服务器 http://localhost:8081/b.html的数据，我们可以在该页面下新建一个iframe，该iframe的src属性指向服务器地址，利用iframe标签的跨域能力，服务器文件b.html设置好window.name的值。
由于a.html页面和该页面iframe的src不同源，取不到iframe的 name值，所以我们需要在b.html加载完后重定向src到一个同源的html文件，或者设置成'about:blank;' 都行。这时候我只要在 a.html相同目录下新建一个c.html的空页面即可。如果不重定向src 就直接获取window.name会报错：
3、打开两个http服务器：
4、打开浏览器就可以看到结果：http://localhost:8080/a.html
(二)文档请求不同源之window.name跨域的更多相关文章
- (二)文档请求不同源之window.postMessage跨域
一.基本原理 HTML5为了解决跨域,引入了跨文档通信API(Cross-document messaging).这个API为window对象新增了一个window.postMessage方法,允许跨 ...
- (二)文档请求不同源之location.hash跨域
一.基本原理 用location.hash解决域名完全不同的跨域,例如,http://www.baidu.com#helloworld中的"#helloworld"就是locati ...
- (二)文档请求不同源之flash跨域
对于FLash,IE是认object标签的,但是FF和Chrome是认embed标签的. 1.客户端 <param name="allowScriptAccess" valu ...
- (三)ajax请求不同源之服务器代理跨域
一.基本原理 Server Proxy,顾名思义,在服务器端设置一个代理,由服务器端向跨域的网站发出请求,再将请求结果返回给前端,成功避免同源策略的限制. 二.客户端和服务端代码 1.在localho ...
- jsonp突破同源策略，实现跨域访问请求
跨域访问问题,相信大家都有遇到过.这是一个很棘手的问题.不过道高一尺,魔高一丈,对于这类问题,总有解决问题的方案.最近我又接触到了这个问题,解决的途径是ajax+jsonp. 说到这个问题,不得不说一 ...
- jsonp突破同源策略，实现跨域訪问请求
版权声明:本文为博主原创文章,未经博主同意不得转载.如需转载请声明:[转自 http://blog.csdn.net/xiaoxian8023 ] https://blog.csdn.net/xiao ...
- 什么是同源策略,什么是跨域,如何跨域,Jsonp/CORS跨域
同源策略 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响. 可以说Web是构建在同源策略基础之上 ...
- AJAX_违反了同源策略_就是"跨域"——jsonp 和 cors
https 协议 默认端口号 443 http 协议 默认端口号 80 同源策略 由网景公司提出的——浏览器 的 为了浏览器安全而生 同源策略: 协议.域名.端口号 必须完全一致 违 ...
- JS window.name跨域封装
JS window.name 跨域封装 function CrossDomainName(target, agent, callback, security) { if (typeof target ...
随机推荐
- 再也不用c++的string了
今天打比赛,觉得写法没错,但死活过不了大样例.调试时发现用cin读入一行臭长臭长的string类型变量时出锅了,原来几千个字符就读进来500个,导致一直WAWAWAWAWA. 最后yyj神犇帮我就删掉 ...
- boost库在windows上的安装
下载源码boost_1_70_0.zip 1.cmd进入boost源码包,运行bootstrap.bat生成bjam.exe 2.运行bjam.exe搞定 在visual studio配置 1. 项目 ...
- JavaScript 函数递归
递归函数 递归函数是在一个函数通过名字调用自身的情况下构成的 项目中例如树状结构渲染,对象深复制,等很多方面都会使用到递归函数 function factorial(num){ if (num < ...
- javascript通过navigator.userAgent识别各种浏览器
识别各种浏览器的实现原理是根据navigator.userAgent返回值识别: 实现: unction validBrowser(){ var u_agent = navigator.userAge ...
- Nginx web 服务器 安装篇
Nginx介绍: 静态web服务器有Nginx .Apache .lighttpd等 目前国内用的最常见的就是Nginx 和Apache 是一个开源的.支持高性能.高并发的www服务和代理服务软件,N ...
- day01 进制转换与内存分布
今日重点: 1.进制之间的转换 进制:指的是进位的制度.进制主要有二进制.八进制.十六进制等,计算机底层运用的是二进制,为了方便阅读,通常会使用八进制或十六进制进行表示.在32位系统中,通常使用八进制 ...
- 避免’sudo echo x >’ 时’Permission denied’
避免’sudo echo x >’ 时’Permission denied’ 甲: 示例sudo echo a > 1.txt-bash: 1.txt: Permission denied ...
- web富文本编辑器收集
1.UEditor 百度的. 优点:插件多,基本满足各种需求,类似贴吧中的回复界面. 缺点:不再维护,文档极少,使用并不普遍,图片只能上传到本地服务器,如果需要上传到其他服务器需要改动源码,较为难办, ...
- lnmp 1.5 mysql数据库开启远程访问
LNMP默认是禁止远程连接数据库的,但是有时候为了方便,我们想要远程,下面是开启远程的方法 sudo su # 切换为root用户模式,省的接下来操作的时候出现权限问题 mysql -u root - ...
- Mockito框架入门教程（二）
接上一篇,继续学习其它的.... 8.找出冗余的互动(即未被验证到的) @Test(expected = NoInteractionsWanted.class) public void find_re ...