window.name属性详解（Javascript）

最新推荐文章于 2021-05-18 15:08:12 发布

置顶 dEMons_mIN

最新推荐文章于 2021-05-18 15:08:12 发布

阅读量1.2w

点赞数 13

分类专栏： Javascript 文章标签： javascript js

本文链接：https://blog.csdn.net/qq572069832/article/details/109751956

版权

Javascript 专栏收录该内容

2 篇文章 1 订阅

订阅专栏

关于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值拿数据。

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

dEMons_mIN

关注

13
点赞
踩
40

收藏

觉得还不错? 一键收藏
9
评论
window.name属性详解（Javascript）

关于window下自带name的属性不知道大家有没有发现这样一种情况在控制台里直接输出未声明变量，正常情况应该是会报错的，而且声明未赋值的变量输出应该是undefined但是偏偏就个别特例，就是name属性其实window自身就带有name这个属性，在控制太输入window可以可以看到打开往下翻就可以找到window.name直译过来是窗口名字，主要用于为超链接和表单设置目标（targets），什么意思呢，我们做个案例建立两个网页第一个<!DOCTYPE html&g
复制链接

扫一扫