关于window下自带name的属性

不知道大家有没有发现这样一种情况

在控制台里直接输出未声明变量，正常情况应该是会报错的，而且声明未赋值的变量输出应该是undefined

var a;
//undefined
b;
//报错

但是偏偏就个别特例，就是name属性
其实window自身就带有name这个属性，在控制台输入window可以可以看到
打开往下翻就可以找到

window.name直译过来是窗口名字，主要用于为超链接和表单设置目标（targets），什么意思呢，我们做个案例

建立两个网页
第一个页面

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>JSdemo1</title>
</head>
<body><a href="./demo2.html" target="hello world">跳转</a>
</body>
</html>

第二个网页

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>JSdemo2</title><script>document.write( window.name + "<br>" + name )</script>
</head>
<body>
</body>
</html>

我们打开一个网页点击跳转看看效果
这里我们就可以看出，第一个网页的a标签通过target属性将值赋值给第二个窗口的name属性，这样第二个网页的name属性就有值了。
还有一点需要注意，如果给name赋值，那么 window.name 会调用类似于 toString 的方法将赋给它的值转换成对应的字符串表示。为什么说类似呢？因为toString的可以将Symbol数据类型转字符串，但它不行。

现在我们已经认识了window.name的属性了，可以做做下面这题试试手。

var name = 123;
var obj = {};
console.log(name + 123 + obj )

以下是关于 window.name 跨域的一些补充！！！

这里提一下 window.open( strUrl , strWindowName , [strWindowFeatures] ) 的第二值也是可以给新窗口设置window.name，详情可参考 —— window.open
用 window.name 实现跨域，是利用他的一个特点，就是在一个页面载入的其他页面将共享一个window.name，其他页面都有对其的读写权限，即使其他页面载入新页面，其window.name也不变。例：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>页面a</title>
</head>
<body>
<script>var a = window.open('./b.html','helloWord')console.log( '在页面a可以访问页面b的name值 : ' + a.name)
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>页面b</title><script>document.write( '页面b : ' + window.name )</script>
</head>
<body><a href="./c.html">载入新页面</a>
</body>
</html>

<!DOCTYPE html>
<html>
<head><title>页面c</title>
</head>
<body>
<script>document.write(window.name)
</script>
</body>
</html>

三个页面输出如下

跨域就是利用这一特性 + 工具人iframe 实现。例：
下面有三个页面
第一个页面放在域名localhost下

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>页面一</title>
</head>
<body><h1>页面一</h1><script>var iframe = document.createElement('iframe');//工具人iframe.style.display = "none";//工具人隐藏在背后默默付出var flag = false;iframe.onload = function () {if ( flag ) {var data = iframe.contentWindow.name;//contentWindow.name可以拿到iframe的窗口name值console.log(data);iframe.contentWindow.close();//关闭隐藏的页面document.body.removeChild(iframe);//删除隐藏的页面} else {flag = true;iframe.contentWindow.location = 'http://localhost/demo2.html';//这里因为浏览器同源策略，需要将链接改成与页面一同源的页面（也就是页面二），这里会再次触发load事件}}iframe.src = 'http://data/data.html';//跨域，这里窗口已经拿到name，所以上面更换地址后name的值依旧存在document.body.appendChild(iframe);</script>
</body>
</html>

第二个页面是空页面，也是在localhost域名下

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>页面二</title>
</head>
<body>
</body>
</html>

第三个页面是数据页面，放在data域名下

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>data</title>
</head>
<body><h1>数据</h1>
<script>window.name = '{data:"数据"}';//将数据存到window.name里
</script>
</body>
</html>

输出结果如下

总结就是，给iframe赋值跨域的链接，加载完后触发load事件，此时iframe已经拿到数据放在window.name里，因为浏览器同源策略没法直接拿iframe的name值，所以将iframe的地址改成同域名下的一个网页，在用contentWindow方法获取iframe的name值拿数据。

补充到这里就结束了，前端领域要学的很多，我也正处在学习阶段，要是哪里有问题欢迎大家指正，大家一起学习！！！

window.name属性详解（Javascript）相关推荐

JS代码的window.location属性详解
如果你稍微懂一些JS代码,一般都会知道 window.location.href 这个属性.并且用该属性获取页面 URL 地址: window.location.href = window.locat ...
html中offsetleft属性,详解 javascript中offsetleft属性的用法
此属性可以返回当前元素距离某个父辈元素左边缘的距离,当然这个父辈元素也是有讲究的. (1).如果父辈元素中有定位的元素,那么就返回距离当前元素最近的定位元素边缘的距离. (2).如果父辈元素中没有定位 ...
window 程序报错自动重启_好程序员web前端教程之详解JavaScript严格模式
好程序员web前端教程之详解JavaScript严格模式,严格模式(Strict mode)是由ECMA-262规范定义的新兴JavaScript标准,发布于2009年12月第五版.旨在改善错误检查功 ...
详解 javascript中offsetleft属性的用法（转）
详解 javascript中offsetleft属性的用法转载 2015-11-11 投稿:mrr 我要评论本章节通过代码实例介绍一下offsetleft属性的用法,需要的朋友可以做一 ...
JavaScript Function.arguments 属性详解
转载自 JavaScript Function.arguments 属性详解 arguments属性是正在执行的函数的内置属性,返回该函数的arguments对象.arguments对象包含了调用 ...
详解JavaScript变量类型判断及domReady原理写得很好
原文:详解JavaScript变量类型判断及domReady原理我们知道,在开发JavaScript时候,经常要判断JavaScript变量类型,此 JavaScript教程详细介绍JS变量的判断 ...
window.onload用法详解
网页中的javaScript脚本代码往往需要在文档加载完成后才能够去执行,否则可能导致无法获取对象的情况,为了避免这种情况的发生,可以使用以下两种方式: 一.将脚本代码放在网页的底端,这样在运行脚本代 ...
【input 标签的 type 属性详解】
input 标签的 type 属性详解 1. input 输入标签的 type 属性 1.1 input 标签的 type类型属性的常用属性值 ⑴ 单行文本框: type="text&qu ...
Flash播放控件属性详解
Flash 播放控件属性详解一.属性篇 1.AlignMode(读写) 语法:AlignMode As Long 说明:对齐方式(与SAlign 属性联动).当控件的长宽比例与影片不一致且WMo ...

window.name属性详解（Javascript）

关于window下自带name的属性

window.name属性详解（Javascript）相关推荐

最新文章

热门文章