(二)文档请求不同源之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 ...
随机推荐
- x86汇编语言实践（1）
0 写在前面 为了更深入的了解程序的实现原理,近期我学习了IBM-PC相关原理,并手工编写了一些x86汇编程序. 在2017年的计算机组成原理中,曾对MIPS体系结构及其汇编语言有过一定的了解,考虑到 ...
- Spring Cloud Data Flow 中的 ETL
Spring Cloud Data Flow 中的 ETL 影宸风洛 程序猿DD 今天 来源:SpringForAll社区 1 概述 Spring Cloud Data Flow是一个用于构建实时数据 ...
- 条件随机场（CRF）
从宏观上讲,条件随机场就是给出一个序列 X = (x1, x2 ... xn) 得到 另一个序列 Y = (y1 , y2 ... yn). 这两个序列有着一些独特的特性,满足马尔可夫随机场,我理解的 ...
- Java虚拟机垃圾回收(三) 7种垃圾收集器
Java虚拟机垃圾回收(三) 7种垃圾收集器 主要特点 应用场景 设置参数 基本运行原理 在<Java虚拟机垃圾回收(一) 基础>中了解到如何判断对象是存活还是已经死亡?在<Java ...
- [Android] Android 锁屏实现与总结 （二）
上接: [Android] Android 锁屏实现与总结 (一) 系列文章链接如下: [Android] Android 锁屏实现与总结 (一) [Android] Android 锁屏实现与总结 ...
- 轴对称 Navier-Stokes 方程组的点态正则性准则 I
在 [Lei, Zhen; Zhang, Qi. Criticality of the axially symmetric Navier-Stokes equations. Pacific J. Ma ...
- 基于STM32F1的时钟芯片DS1302驱动
目录 DS1302.h源代码 DS1302.c源代码 DS1302.h源代码 /** ********************************************************* ...
- JS遍历数组的操作（map、forEach、filter等）
1.map的用法 定义:原数组被“映射”成对应新数组 代码示例: var users = [ {name: "张含韵", "email": "zhan ...
- javascript基础 之 表单
1,js可以验证表单 实例1,js获取表单的内容 //html表单是这样的 <form name="myForm" action="demo_form.php&qu ...
- Thymleaf中th:each标签遍历list如何获取index
简单介绍:传递给后台一个String类型的list,需要获取到list的每一个元素,然后进行筛选,得到正确的文本值,看代码就明白了 代码: //后台java代码//failList是一个String类 ...