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. NRF24L01学习
			
    一.工作模式 PWR_UP和PRIM_RX在寄存器0x00中的第0位和第1位. 待机模式I:只是使用晶振工作,CE=0时是拉低? 待机模式II:部分时钟缓冲器处在工作模式.TX FIFO为空并且CE为 ...
    
			
    2. 
						
  2. HTML中多媒体标签技术说明
			
    在纯文本的HTML页面中加入图片,给原来单调乏味的页面添加生气.HTML语言中利用<IMG>标记插入图片. 1．图片标记<IMG>及其属性 在网站上,网页设计者都使用了大量精心 ...
    
			
    3. 
						
  3. Homestead中PHP扩展无phpize难以安装redis扩展的问题及解决办法
			
    这真是一个非常深的坑.homestead中自带很多版本的php.然而扩展中缺没有phpize,这个东西是php添加扩展需要的东西本人在laravel中需要用到Redis扩展.这个和laravel的pr ...
    
			
    4. 
						
  4. 机器学习算法--Elastic Net
			
    1) alpha : float, optional Constant that multiplies the penalty terms. Defaults to 1.0. See the note ...
    
			
    5. 
						
  5. Nodejs-交互式版本管理
			
    n - npm:Interactively Manage Your Node.js Versions
    
			
    6. 
						
  6. cs224d 作业 problem set2 (一) 用tensorflow纯手写实现sofmax 函数,线性判别分析,命名实体识别
			
    Hi Dear Today we will use tensorflow to implement the softmax regression and linear classifier algor ...
    
			
    7. 
						
  7. 机器学习笔记－－classification_report&精确度/召回率/F1值
			
    https://blog.csdn.net/akadiao/article/details/78788864 准确率=正确数/预测正确数=P 召回率=正确数/真实正确数=R F1 F1值是精确度和召回 ...
    
			
    8. 
						
  8. 使用JQuery对页面进行绑值
			
    使用JQuery对页面进行绑值 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g ...
    
			
    9. 
						
  9. Linux下tomcat启动慢，阻塞
			
    声明:本文为转载,请尊重版权,原文地址: https://www.cnblogs.com/songjinju/p/7505564.html 这两天在linux部署完tomcat以后,发现每次启动都非常 ...
    
			
    10. 
						
  10. numpy的函数使用
			
    目录 注 help ,帮助 numpy.genfromtxt,导入文件 array,创建数组(1,2维数组) array,创建行列向量 numpy.shape,看numpy数据的行列信息 numpy. ...
    
			
    11.