浏览器环境 - window 对象 - 属性介绍-CSDN博客

1 origin

window.origin使用返回的是当前网页的网址。打开百度首页，并在控制台中输入

window.origin

控制台中会输出"https://www.baidu.com"，并不包含查询字符串，比如浏览器地址栏输入https://www.baidu.com/?nDos=great。打开百度首页之后，使用window.origin也不会输出其中的?nDos=great。

2 name

【设置】或【返回】存放窗口的名称。

2.1 如何指定

在 window.open() 方法创建窗口时指定。window.open( pageURL, name, parameters )，其中的 name 参数即是。

使用一个 <frame> 标记的 name 属性指定。<frame name="nDos"></frame>。

2.2 用处

窗口的名称可以用作一个 <a> 或者 <form> 标记的 target 属性的值。以这种方式使用 target 属性声明了超链接文档或表单提交结果应该显示于指定的窗口或框架中。

比如：<a href="......." target="nDos"></a>

对于内联iframe，如一个页面里面有很多iframe，就可以用：window.name（当前window的名称）、window.parent.name（父window的名称）、widnow.top.name（顶层window的名称）。

2.3 跨域

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

利用这点可以实现跨域传递数据

请看下面两个html文件组成的例子：

a.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>a.html</title>
</head>
<body>
<script>
    window.name = '这是a.html设置的window.name值';
    /*2秒后在本页面打开b.html*/
    setTimeout(function(){
        window.location = 'b.html';
    }, 2000);
</script>
</body>
</html>

b.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>b.html</title>
</head>
<body>
<script>
    document.write(window.name);
</script>
</body>
</html>

在浏览器中打开 a.html，2 秒之后会跳转到 b.html，并在页面中写入“这是 a.html 设置的 window.name 值”。

可以看到 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.location = 'b.html' 中的跳转页面改为 www.baidu.com，然后打开控制台输出 window.name 看看是什么数据。

当然这种跳转的方式来跨域显然不能实际应用，比如我们的页面是 http://localhost/a.html，而想要获取的数据在目标页面 http://www.cnblogs.com/ndos/data.html 中。这个时候我们需要一个中间角色iframe，通过它来获得data.html中的数据。具体方法如下。

以下为修改后的 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>

上述代码首先设置了一个 iframe 标签，将 src 设置为跨域网页的地址，加载成功后将执行绑定在 onload 事件上的代码，也就是 getData()。该函数中在iframe上重置了onload事件绑定的函数，其中代码可以获取 iframe 中 window 对象的 name 属性值，最后最关键的一步是将 iframe 的 src 属性值设置为 b.html，也就是与 a.html 同源的页面地址。

如果没有这最后最关键的一步，那么将获取不到 iframe.contentWindow.name 的值。这受到浏览器的同源策略所限制，但是最后一步使得 iframe 中的页面与 a.html 是同源的，同时 iframe 中的页面跳转也没有改变 window.name 的值，最终我们获得的还是 http://www.cnblogs.com/data.html 中的值。

3 status

相关联的还有 defaultStatus 和 defaultstatus 属性，个人还不知道这几个属性有什么用，在试验中也发现不起作用。比如谷歌不显示状态栏（仅在鼠标移动到 a 标签上才显示）；IE中也不起作用，应该是IE设置的原因，具体没有深入配置。

有兴趣的读者可自行调试。

4 length

length 属性返回在当前窗口中frames的数量（包括IFRAMES）。

该属性值与window.frames.length属性值相等。

5 innerWidth/Height

窗口中文档显示区域的宽度，该属性可读可写，以像素计。

这里的宽度和高度不包括菜单栏、工具栏以及滚动条等的高度。

IE8之前不支持这些属性。它用 document.documentElement 或 document.body （与 IE 的版本相关）的 clientWidth 和 clientHeight 属性作为替代。

6 outerWidth/Height

表示窗口的宽度包括两边的border及滚动条的值， outerHeight 表示窗口的高度包括菜单，地址栏，工具栏等，属性可读性。

IE8之前的浏览器不支持，且没有提供替代的属性。

7 滚动值

scrollY：firefox、chrome，opera支持，IE不支持，忽略Doctype规则。

pageYOffset：IE9+ 、firefox、chrome，opera均支持该方式获取页面滚动高度值，并且会忽略Doctype定义规则。

延伸记忆：

document.documentElement.scrollTop：如果页面定义了doctype文档头，基本所有的浏览器都支持。除safari貌似不支持，定义html5 doctype，支持body.scrollTop却不支持documentElement.scrollTop。

document.body.scrollTop：如果没定义doctype，所有浏览器都支持，（定义了doctype，chrome 也支持）

8 screenX/Y

表示窗口相对于屏幕左上角的位置。注意IE不支持此属性。只读属性。

screenTop/screenLeft属性值相同。

9 devicePixelRatio

window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。公式表示就是：window.devicePixelRatio = 物理像素 / dips。比如电脑时值为1，iPhoneX值为3。

dip或dp,（device independent pixels，设备独立像素）与屏幕密度有关。dip可以用来辅助区分视网膜设备还是非视网膜设备。

浏览器一般都会有放大缩小的控件，当你选择不同的缩放比例时，window.devicePixelRatio都会相应的改变。比如将页面放大2倍，那么window.devicePixelRatio=2。

这个值大多用在移动设备上，正常人眼可以识别的分辨率为300PPI，而现在很多设备的分辨率都超过了300PPI。如果设备总是以满分辨率来显示东西就可能造成文字太小，人们看不清。因此像浏览器这样的软件就会对内容做一次放大后再进行渲染，也就是降低分辨率。要降低分辨率就需要让像素这个单位变大，因此PPI的计算不再使用物理像素，而改用设备独立像素。那么设备独立像素和物理像素之间就存在一个比例差异，这就是设备像素比。