window对象有一个name属性，该属性有一个特征：即在一个窗口的生命周期内，窗口载入的所有的页面都是共享一个window.name的，每一个页面对window.name都有读写的权限，window.name是持久的存在于一个窗口载入的所有页面中的，并不会因为新的页面的载入而被重置。

下面为a.html中代码：

<script>

    window.name = '我是页面a中设置的值';

    setInterval(function(){

        window.location = 'b.html';

    },2000)//两秒后把一个新页面b.html载入到当前的window中

</script>

b.html中的代码

<script>

    console.log(window.name);//读取window.name的值

</script>

上诉代码形成的效果就是：a.html页面载入2s后，跳转到b.html页面，b.html会在控制台输出‘我是页面a中设置的值’；

我们可以看到b.html页面上成功输出了a.html页面中设置的window.name的值，如果在之后所有载入的页面都没对window.name进行修改的话，那么所有的这些页面获取到的window.name的值都是a.html页面中设置的那个值； 
不过要注意的是：window.name的值只能是字符串的形式，这个字符串的大小最大只能允许2M左右，具体取决于不同的浏览器，但是一般是够用了。

上面的例子中，我们用到的页面a.html和b.html是处于同一个域的，但是即使a.html与b.html处于不同的域中，上述结论同样是适用的，这也正是利用window.name进行跨域的原理；

实例说明：下面就来看一看具体是如何通过window.name来跨域获取数据的；

比如有一个www.example.com/a.html页面。需要通过a.html页面里的js来获取另一个位于不同域上的页面www.cnblogs.com/data.html中的数据。

data.html页面中的设置一个window.name即可,代码如下：

<script>

    window.name = "我是data.html中设置的a页面想要的数据";

</script>

那么接下来问题来了，我们怎么把data.html页面载入进来呢，显然我们不能直接在a.html页面中通过改变window.location来载入data.html页面（因为我们现在需要实现的是a.html页面不跳转,但是也能够获取到data.html中的数据）； 
具体的实现其实就是在a.html页面中使用一个隐藏的iframe来充当一个中间角色，由iframe去获取data.html的数据，然后a.html再去得到iframe获取到的数据。 
充当中间人的iframe想要获取到data.html中通过window.name设置的数据，只要要把这个iframe的src设置为www.cnblogs.com/data.html即可,然后a.html想要得到iframe所获取到的数据，也就是想要得到iframe的widnow.name的值，还必须把这个iframe的src设置成跟a.html页面同一个域才行，不然根据同源策略，a.html是不能访问到iframe中的window.name属性的。

以下为a.html中的代码：

<body>

<iframe id="proxy" src="http://www.cnblogs.com/data.html" style="display: none;" onload = "getData()"> 

<script>

    function getData(){

        var iframe = document.getElementById('proxy);

        iframe.onload = function(){

            var data = iframe.contentWindow.name;

            //上述即为获取iframe里的window.name也就是data.html页面中所设置的数据；

        }

        iframe.src = 'b.html';

    }

</script>

</body>
												


											
跨域解决方法之window.name的更多相关文章
	

    
								
  1. [转]vue跨域解决方法
		
      vue跨域解决方法 vue项目中,前端与后台进行数据请求或者提交的时候,如果后台没有设置跨域,前端本地调试代码的时候就会报“No 'Access-Control-Allow-Origin' hea ...
    
		
    2. 
						
  2. JavaScript跨域解决方法大全
		
    跨域的定义:JavaScript出于安全性考虑,同源策略机制对跨域访问做了限制.域仅仅是通过“URL的首部”字符串进行识别,“URL的首部”指window.location.protocol +win ...
    
		
    3. 
						
  3. ajax原理和跨域解决方法
		
    ajax是异步的 JavaScript 和 XML.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 1--启动 ...
    
		
    4. 
						
  4. [跨域]跨域解决方法之Ngnix反向代理
		
    跨域原理:http://www.cnblogs.com/Alear/p/8758331.html 介绍Ngnix之前,我么先来介绍下代理是什么~ 代理相当于中间人,中介的概念 代理分为正向代理和反向代 ...
    
		
    5. 
						
  5. js 几种跨域解决方法
		
    同源策略: JS只能与同一个域中的页面进行通讯,必须是协议.域名.端口都相同,相同域下才能相互通信,这可以被认为是一种通信原则,叫同源策略. 跨域: js跨域是指通过js在不同的域之间进行数据传输或通 ...
    
		
    6. 
						
  6. WCF跨域解决方法及一些零碎的东西。
		
    之前发过一篇随笔,说的WCF配置文件配置问题.里面也配了跨域支持,但是jsoncollback只支持Get请求,Post请求是解决不了,所以这里把真正的WCF跨域问题贴出来. 话不多说,直接帖配置文件 ...
    
		
    7. 
						
  7. vue+axios跨域解决方法
		
    通过这种方法也可以解决跨域的问题. 使用http-proxy-middleware 代理解决(项目使用vue-cli脚手架搭建) 例如请求的url:“http://f.apiplus.cn/bj11x ...
    
		
    8. 
						
  8. vue跨域解决方法
		
    针对不在同一服务器,很可能出现跨域问题,解决方法 注意:修改了配置文件,需要重启才能生效
    
		
    9. 
						
  9. cookie 跨域解决方法
		
    1.Nginx 正向和反向代理的区别 正向代理和反向代理的区别:正向代理隐藏真实客户端,反向代理隐藏真实服务端,图示: 2.cookie跨域问题 因为cookie存在跨域问题,其中一个解决方法是,设置 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 2019ccpc秦皇岛/Gym102361 F  Forest Program 仙人掌上dfs
			
    题意: 某地沙漠化严重,沙漠里长了很多仙人掌,现在要让你删掉仙人掌的一些边让它的所有连通分量都是树,就完成了沙漠绿化(什么鬼逻辑?)让你计算删边的方案数. 仙人掌是一种特殊的图,它的每一条边只属于1或 ...
    
			
    2. 
						
  2. Redis入门很简单之五【Jedis和Spring的整合】
			
    Redis入门很简单之五[Jedis和Spring的整合] 博客分类: NoSQL/Redis/MongoDB redisnosql缓存jedisspring  在上一篇文章中,简单介绍了Jedis的 ...
    
			
    3. 
						
  3. navicat连接登录windows10本地wsl的数据库
			
    1.修改MySql的配置文件 sudo vim /etc/mysql/mysql.conf.d/mysqld.cnf 将找到 bind-address = 127.0.0.1 并注释掉 → # bin ...
    
			
    4. 
						
  4. Webx.0-Web3.0：Web3.0
			
    ylbtech-Webx.0-Web3.0:Web3.0 Web3.0只是由业内人员制造出来的概念词语,最常见的解释是,网站内的信息可以直接和其他网站相关信息进行交互,能通过第三方信息平台同时对多家网 ...
    
			
    5. 
						
  5. HTML-参考手册: HTML 语言代码
			
    ylbtech-HTML-参考手册: HTML 语言代码 1.返回顶部 1. HTML 语言代码 参考手册 ISO 语言代码 HTML 的 lang 属性可用于声明网页或部分网页的语言.这对搜索引擎和 ...
    
			
    6. 
						
  6. HTTP 请求及响应 （转）
			
    HTTP请求 4.1.HTTP请求包括的内容 客户端连上服务器后,向服务器请求某个web资源,称之为客户端向服务器发送了一个HTTP请求. 一个完整的HTTP请求包括如下内容:一个请求行.若干消息头. ...
    
			
    7. 
						
  7. Django框架（十八）—— CBV源码分析、restful规范、restframework框架
			
    目录 CBV源码分析.restful规范.restframework框架 一.CBV源码分析 1.url层的使用CBV 2.as_view方法 3.view方法 4.dispatch方法(可以在视图层 ...
    
			
    8. 
						
  8. promise的基本用法
			
    // Promise 对象,可以保存状态 //Promise 第一步 // 异步代码 写在 Promise的函数中 第二步 const promise = new Promise((resolve,  ...
    
			
    9. 
						
  9. 把多个JavaScript函数绑定到onload事件处理函数上的技巧
			
    一,onload事件发生条件 用户进入页面且页面所有元素都加载完毕.如果在页面的初始位置添加一个JavaScript函数,由于文档没有加载完毕,DOM不完整,可能导致函数执行错误或者达不到我们想要的效 ...
    
			
    10. 
						
  10. Synchronized 与 ReentrantLock 的区别！
			
    来源:cnblogs.com/baizhanshi/p/7211802.html 之前栈长分享了重入锁的概念:<到底什么是重入锁,拜托,一次搞清楚!>,今天现来深入了解下 Synchron ...
    
			
    11.