(二)文档请求不同源之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 ...
随机推荐
- BZOJ3784树上的路径
题目描述 给定一个N个结点的树,结点用正整数1..N编号.每条边有一个正整数权值.用d(a,b)表示从结点a到结点b路边上经过边的权值.其中要求a<b.将这n*(n-1)/2个距离从大到小排序, ...
- JS 防抖函数和节流函数
文章转载自:木上有水 什么是防抖?什么是节流? 工作中我们经常会用一些方法监听某些事件的完成,比如scroll.resize.keyup等. 常规事件触发的时候,比如scroll,会在短时间内触发多次 ...
- URL传递中文参数乱码问题
web项目开发中,经常遇到中文参数乱码问题,而且有时候明明测试服务器上好用,换个正式环境就不用的情况也经常出现,今天做一个记录,防止自己以后忘记 1.地址栏url请求带中文参数 这类
- mysql中replace替换字符串更改方法
MySQL中update替换部分字符串replace的简单用法 近日,遇到了需要将部分字符串替换为另外的字符,平时用的最多的是直接update整个字段值,在这种情况下效率比较低,而且容易出错.其实my ...
- tomcat 线程池
web server允许的最大线程连接数还受制于操作系统的内核参数设置,通常Windows是2000个左右,Linux是1000个左右. 1.编辑tomcat安装目录下的conf目录下的server. ...
- Entity Framework入门教程(1)---Entity Framework简介
什么是Entity Framework 学习EF的前提:熟练使用Linq和Ado.net,因为在使用EF框架进行开发时,我们大多数情况使用Linq进行查询和操作,而EF的底层实现用的是Ado.net. ...
- CAS实现单点登录
1.简介 SSO单点登录 在多个相互信任的系统中,用户只需要登录一次就可以访问其他受信任的系统. 新浪微博与新浪博客是相互信任的应用系统. *当用户首次访问新浪微博时,新浪微博识别到用户未登录,将请求 ...
- HDU 5983(模拟魔方 模拟)
题意是说给定一个 2*2 魔方的各个面的情况,问是否能转动不超过一次使得魔方复原. 思路是先在输入的时候统计一下已完成的面数,要想以最多一次的转动使得魔方复原,那么已完成的面数只能是 2 面或者 6 ...
- Node.js实战项目学习系列(5) node基础模块 path
前言 前面已经学习了很多跟Node相关的知识,譬如开发环境.CommonJs,那么从现在开始要正式学习node的基本模块了,开始node编程之旅了. path path 模块提供用于处理文件路径和目录 ...
- Nginx故障排错及一个网站小实例
Nginx访问403错误: 1.没有首页文件 2.没有权限 例:chmod 700 /application/nginx/html/index.html 3.nginx.conf配置文件和首页文件不 ...