一、基本原理

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

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

(二)文档请求不同源之window.name跨域的更多相关文章

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

    一.基本原理 HTML5为了解决跨域,引入了跨文档通信API(Cross-document messaging).这个API为window对象新增了一个window.postMessage方法,允许跨 ...

  2. (二)文档请求不同源之location.hash跨域

    一.基本原理 用location.hash解决域名完全不同的跨域,例如,http://www.baidu.com#helloworld中的"#helloworld"就是locati ...

  3. (二)文档请求不同源之flash跨域

    对于FLash,IE是认object标签的,但是FF和Chrome是认embed标签的. 1.客户端 <param name="allowScriptAccess" valu ...

  4. (三)ajax请求不同源之服务器代理跨域

    一.基本原理 Server Proxy,顾名思义,在服务器端设置一个代理,由服务器端向跨域的网站发出请求,再将请求结果返回给前端,成功避免同源策略的限制. 二.客户端和服务端代码 1.在localho ...

  5. jsonp突破同源策略，实现跨域访问请求

    跨域访问问题,相信大家都有遇到过.这是一个很棘手的问题.不过道高一尺,魔高一丈,对于这类问题,总有解决问题的方案.最近我又接触到了这个问题,解决的途径是ajax+jsonp. 说到这个问题,不得不说一 ...

  6. jsonp突破同源策略，实现跨域訪问请求

    版权声明:本文为博主原创文章,未经博主同意不得转载.如需转载请声明:[转自 http://blog.csdn.net/xiaoxian8023 ] https://blog.csdn.net/xiao ...

  7. 什么是同源策略,什么是跨域,如何跨域,Jsonp/CORS跨域

    同源策略 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响. 可以说Web是构建在同源策略基础之上 ...

  8. AJAX_违反了同源策略_就是"跨域"——jsonp 和 cors

    https 协议    默认端口号 443 http 协议    默认端口号 80 同源策略 由网景公司提出的——浏览器 的 为了浏览器安全而生 同源策略: 协议.域名.端口号    必须完全一致 违 ...

  9. JS window.name跨域封装

    JS window.name 跨域封装 function CrossDomainName(target, agent, callback, security) { if (typeof target ...

随机推荐

  1. P1962 斐波那契数列

    题面是这样的,其实斐波那契我们之前也有接触过,并不是什么太陌生的玩意,第一个想到的方法其实是用递归来做,这样的话其实是非常轻松的,but同志们你们有没有关注过这样一个鬼东西 你以为蓝题是让你切着玩的吗 ...

  2. 欧拉筛法模板and 洛谷 P3383 【模板】线性筛素数（包括清北的一些方法）

    题目描述 如题,给定一个范围N,你需要处理M个某数字是否为质数的询问(每个数字均在范围1-N内) 输入格式 第一行包含两个正整数N.M,分别表示查询的范围和查询的个数. 接下来M行每行包含一个不小于1 ...

  3. Django练习——图书管理系统

    Django图书管理系统 创建一个项目 1. django-admin startproject 图书管理 2. cmd 命令终端下创建一个app python manage.py startapp ...

  4. adb调试

    adb usb调试,adb网络调试是非常实用的工具,通过电脑连接手机达到文件传输.电脑端安装app刷机等功能材料: 材料: 1.电脑端安装号对应手机的驱动程序 2.电脑端下载好adb调试工具 3.手机 ...

  5. qt: 系统默认程序打开文件或者软件；

    Qt提供了QDesktopServices类, 可以利用openUrl函数调用默认程序打开文件: 源码参考: #ifdef Q_OS_WIN32 m_szHelpDoc = QString(" ...

  6. MyBatis小问题(1)-Mapper中错误No constructor found...

    前两天又被公司叫去修改其他产品的一些问题了,没有看java相关的,今天周六,看了看MyBatis东西. 就是简单的在MySql中建了个users表,很简单,包含id,name,age,写了个bean. ...

  7. 金融量化分析【day112】：均值回归策略

    一.均值回归策略 1.什么是回归策略 二.归一标准化 import numpy as np a = np.random.uniform(100,5000,1000) b = np.random.uni ...

  8. 快速定位XPATH

    本文主要介绍如何快速定位WEB端的xpath. 浏览器:Chrome.火狐浏览器 两种浏览器的定位方法都是一样:按F12键,可查看开发者工具 上图,开发者工具最左上角是定位按钮,点击此按钮,再点击浏览 ...

  9. DirectX11 With Windows SDK--12 深度/模板状态、平面镜反射绘制

    前言 深度/模板测试使用的是与后备缓冲区同等分辨率大小的缓冲区,每个元素的一部分连续位用于深度测试,其余的则用作模板测试.两个测试的目的都是为了能够根据深度/模板状态需求的设置来选择需要绘制的像素. ...

  10. [物理学与PDEs]第4章习题4 一维理想反应流体力学方程组的守恒律形式及其 R.H. 条件

    写出在忽略粘性与热传导性, 即设 $\mu=\mu'=\kappa=0$ 的情况, 在 Euler 坐标系下具守恒律形式的一维反应流动力学方程组. 由此求出在解的强间断线上应满足的 R.H. 条件 ( ...