本文已参与「新人创作礼」活动，一起开启掘金创作之路

window

解释 JavaScript Window - 浏览器对象模型

现代的浏览器已经（几乎）实现了 JavaScript 交互相同的方法和属性，因此它经常作为 BOM 的方法和属性被提到

JavaScript Window - 浏览器对象模型

Window 对象

• 所有浏览器都支持 window 对象。它代表浏览器的窗口。

• 所有全局 JavaScript 对象，函数和变量自动成为 window 对象的成员。

• 全局变量是 window 对象的属性。

• 全局函数是 window 对象的方法。 JavaScript Window - 浏览器对象模型

窗口尺寸

浏览器窗口（浏览器视口）不包括工具栏和滚动条。

• window.innerHeight - 浏览器窗口的内高度（px）
• window.innerWidth - 浏览器窗口的内宽度（px）

对于 Internet Explorer 8, 7, 6, 5：

• document.documentElement.clientHeight
• document.documentElement.clientWidth

或

• document.body.clientHeight
• document.body.clientWidth

解决浏览器兼容问题

var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight; 

窗口其他方法

• window.open() - 打开新窗口
• window.close() - 关闭当前窗口
• window.moveTo() -移动当前窗口
• window.resizeTo() -重新调整当前窗口

screen

客户端屏幕信息

属性	说明	备注
width	以像素计的屏幕宽度	px
height	以像素计的屏幕高度	px
availWidth	屏幕的宽度，减去窗口工具条之类的界面特征	px
availHeight	屏幕的高度，减去窗口工具条之类的界面特征	px
colorDepth	显示一种颜色的比特数	24 bits 或者 32 bits
pixelDepth	屏幕的像素深度	对于现代计算机，颜色深度和像素深度是相等的

Location

用于获取当前页面地址（URL）并把浏览器重定向到新页面 | 属性 | 说明 |备注 | --- | --- | --- | |href |返回当前页面的 href (URL) |hostname |返回 web 主机的域名 |pathname |返回当前页面的路径或文件名 |protocol |返回使用的 web 协议（http: 或 https:） |assign |加载新文档

history

对象包含浏览器历史(路由)

• history.back() - 等同于在浏览器点击后退按钮
• history.forward() - 等同于在浏览器中点击前进按钮

navigator

对象包含有关访问者的信息 | 属性 | 说明 |备注 | --- | --- | --- | |appName |浏览器的应用程序名称|"Netscape" 是 IE11、Chrome、Firefox 以及 Safari 的应用程序名称的统称 |appCodeName |浏览器的应用程序代码名称| |platform |浏览器引擎的产品名称| |appVersion |属性返回有关浏览器的版本信息