(二)文档请求不同源之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>
<htmllang="en">
<head><metacharset="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

5、JS解决iframe之间通信和自适应高度的问题

转载于:https://www.cnblogs.com/camille666/p/cross_domain_window_name.html

(二)文档请求不同源之window.name跨域相关推荐

GA/T1400文档请求失败消息返回提
GA/T1400 文档请求失败消息返回指的是当你在请求 GA/T1400 标准文档时,服务器返回的消息告诉你请求失败.这可能是由于请求的文档不存在或者因为服务器遇到了问题而无法响应请求.你应该检查你的 ...
浏览器同源策略，及跨域解决方案
原文链接:浏览器同源策略,及跨域解决方案一.Origin(源) 源由下面三个部分组成: 域名端口协议两个 URL ,只有这三个都相同的情况下,才可以称为同源. 下来就以 "www.e ...
CORS 请求未能成功_当遇到跨域开发时, 我们如何处理好前后端配置和请求库封装(koa/axios版)...
我们知道很多大型项目都或多或少的采用跨域的模式开发, 以达到服务和资源的解耦和高效利用. 在大前端盛行的今天更为如此, 前端工程师可以通过nodejs或者Nginx轻松搭建起web服务器.这个时候我们 ...
ajax+php跨域请求数据库,基于jQuery的ajax跨域请求，PHP作为服务器端代码
ajax实现跨域请求有两种方式: 方法一:jsonp的方式 jsonp方式的关键点在客户请求以jsonp作为数据类型,服务器端接收jsonp的回调函数,并通过回调函数进行数据的传输.具体代码如下: 客 ...
Vuejs模拟Ajax请求接口（天气预报API）跨域问题 - 案例篇
vuejs的Ajax跨域请求问题一直都是前端人员开发vue项目进程中经常遇到的不得不解决的热门问题,也是个心病. 首先看一下,页面报错内容提示: Access to XMLHttpRequest a ...
爬取斗图网图片,使用xpath格式来匹配内容,对请求伪装成浏览器, Referer 防跨域请求...
6.21自我总结一.爬取斗图网 1.摘要使用xpath匹配规则查找对应信息文件将请求伪装成浏览器Referer 防跨域请求 2.爬取代码 #导入模块 import requests#爬取网址 ur ...
Ajax→异步的JavaScript和XML、HTTP请求响应、Ajax简介同步异步、XMLHttpRequest类的方法及属性、原生Ajax、Koa实现Ajax、接口文档、浏览器同源策略、反向代理
浏览器服务器 HTTP请求响应数据库后端语言 Ajax简介同步异步 Koa前端框架 XMLHttpRequest类的方法及属性原生Ajax Koa实现Ajax JSON DOM 接口文档浏览器同 ...
springboot 接口文档请求 enum_Spring Boot集成SpringFox 3：生成Swagger接口文档
SpringFox介绍 SpringFox是一个开源的API Doc的框架, 它的前身是swagger-springmvc,可以将我们的Controller中的方法以文档的形式展现.官方定义为:Aut ...
OpenCV实践小项目(二) -文档ocr扫描识别
1. 写在前面今天整理OpenCV入门的第二个实战小项目, 前一篇文章是信用卡数字识别, 主要运用了OpenCV基础图像处理操作里面的轮廓检测, 边缘检测,形态学操作, 今天的这个项目叫做文档ocr ...

(二)文档请求不同源之window.name跨域

(二)文档请求不同源之window.name跨域相关推荐

最新文章

热门文章