BOM，谈一谈JavaScript浏览器对象模型以及window 对象的属性

JavaScript浏览器对象模型，英文：Browser Object Model，简称BOM。其实，就是window对象。那window是什么呢？就是浏览器窗口。我们可以通过window对象来访问浏览器相关的内容。

所有全局 JavaScript 对象，函数和变量自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。

window 对象有很多内置的属性和方法，我们可以通过这些属性和方法来和浏览器进行“对话”。

• window 对象的属性

indow对象的属性里，有几个是比较特殊的：

history
location
navigator
screen
document
存储

说它们特殊，是因为它们几个也是对象。这几个对象我们以后写篇文章再单独介绍。

• 窗口大小位置相关

innerWidth属性：返回窗口的文档显示区的宽度。
innerheight属性：返回窗口的文档显示区的高度。

以上两个属性，不包含工具条与滚动条。如下图：

outerHeight属性：设置或返回一个窗口的外部高度，包括所有界面元素（如工具栏/滚动条）。
outerWidth属性：设置或返回窗口的外部宽度，包括所有的界面元素（如工具栏/滚动）。

以上四个属性，都可以获取，也可以设置。它们的值会跟随浏览器窗口变化而变化。

pageXOffset/scrollX属性：返回当前页面相对于窗口显示区左上角的 X 位置。
pageYOffset/scrollY属性：返回当前页面相对于窗口显示区左上角的 Y 位置。

其实，就是滚动条的位置。

screenX/screenLeft属性：返回窗口相对于屏幕的X坐标。
screenY/screenTop属性：返回窗口相对于屏幕的Y坐标。

Firefox不支持screenLeft和screenTop属性。
IE不支持screenX和screenY属性。

这四个是浏览器相对于屏幕的位置。如下图：

• 框架窗口相关

frames属性：返回窗口中所有命名的框架。它是一个数组。
length 属性：返回在当前窗口中frames的数量（包括iframe）。

name属性：设置或返回窗口的名称。
closed属性：返回一个布尔值，该值声明了窗口是否已经关闭。
self属性：返回对当前窗口的引用。等价于 Window 属性。
top属性：返回最顶层的父窗口。
parent属性：返回父窗口。
opener属性：返回源窗口。

parent是相对于框架来说父窗口对象，opener是针对于用window.open打开的窗口来说的父窗口，也就是打开它的来源窗口。

如果想看更系统的前端文章，可以微信搜索公众号：“刘小妞的栖息地”或者识别下面的二维码查看，感谢大家的支持。