BOM对于JavaScript来说是三大部分之一，但是对于在浏览器中使用JavaScript来说，BOM是JavaScript的核心。前期的浏览器凭自己的意愿去扩展和定义BOM，以至于代码在浏览器中并不兼容，但随着HTML5的推出，定义了BOM规范，也拯救了BOM，现在兼容性大大提高了。
window
对于BOM来说，window无疑是核心，表示为一个浏览器的实例，网页中定义的变量、方法等都是以window为全局对象。
对于var定义的全局变量和window.something定义在全局变量上的属性的区别有两点：
1.var声明的变量不可以通过delete来进行删除，而通过window来声明的全局变量可以通过delete进行删除，因为通过var定义的全局变量的[[configurable]]特性值为false，即不可以编辑；
2.如果直接访问不存在的变量，会报错，如果通过window访问不存在的全局变量会返回undefined；
窗口关系及框架（frameset、frames、iframe等）
首先，如果页面中包含有框架，那么一个框架对应着一个window，并且保存在frames中，可以通过访问浏览器页面的window.frames[0]来访问框架，顺序是从上到下，从左到右。每一个window对象都有一个name属性，对应窗口的名称，同样也可以通过name值去访问框架或者页面，例如：window.frames["name"]。
经常使用的代表window的对象有top、parent和self：
top始终指向网页中最外层的window，也就是浏览器窗口的window，使用top.frames[0]可以更准确的访问其中包含的框架；
parent指向的是当前框架的上层框架，也就相当于父框架，如果parent属性作用于浏览器窗口的window的话，那么window.parent == window;
self指向的是当前框架的window，引入的目的也就是为了和top、parent对应起来。
窗口位置
IE、Opera、Safari、Chrome包括有clientLeft、clientTop，分别表示窗口相对于屏幕左、上的位置，也就是距离。而Firefox的属性是clientX、clientY，含义相同，Chrome和Safari都支持。所以这里可以给到兼容性比较高的获取窗口位置的方法：
var pageLeft = typeof window.clientLeft == 'number'?window.clientLeft:window.clientX;
var pageTop = typeof window.clientTop == 'number'?window.clientTop:window.clientY;
可以使用moveTo()和moveBy()进行位置移动，这两个方法都接受两个参数，第一个方法对应的是移动到哪个位置，第二个方法是基于当前位置进行位移。这两个方法很有可能会被禁止，并且这两种方法只对最外层的窗口有效。
窗口大小
这里说的是window属性，但是有的window属性解决不了的需要借助DOM来完成。
一共有四个属性，分别是innerWidth、innerHeight、outerWidth、outerWidth，inner表示可是区域，outer表示的是浏览器窗口（包括了右侧和下侧的滚动条）。
IE8之前并没有提供获取当前浏览器窗口大小的接口，不过可以通过DOM去获取可视区域的大小，在标准模式下可以使用document.clientWidth，但是在混杂模式下就得使用body来获取：
var _innerWidth = window.innerWidth;
var _innerHeight = window.innerHeight;
if(typeof _innerWidth != 'number'){
if(document.compatMode == 'CSS1Compat'){
_innerWidth = document.documentElement.clientWidth;
_innerHeight = document.documentElement.clientHeight;
}else{
_innerWidth = document.body.clientWidth;
_innerHeight = document.body.clientHeight;
}
}
可以使用resizeTo和resizeBy来操作窗口的位置，和moveTo和moveBy类似，接受两个参数，区别也类似，同样只能作用于最外层窗口，可能浏览器会禁止这种操作。
打开窗口和导航
window.open既可以导航到特定URL，也可以打开一个新的窗口，这个方法一共有四个参数，分别是URL、作用的窗口名称、窗口的属性（字符串格式，通过‘，’分割）、一个确定是否取代浏览器历史记录中当前加载的页面的Boolean。
如果传了第二个参数，而参数也是已有窗口或者框架的名称，那么将会在特定的窗口或框架中执行open操作，即：
window.open('http://www.jianshu.com','name');
//相当于<a href="http://www.jianshu.com" target="name"></a>
如果第二个参数不是已有的窗口或框架的名称，那么就会根据第三个参数来创建一个新的窗口或标签页，如果没有第三个参数，则会按照浏览器默认设置创建一个新的窗口或标签页。第三个参数的属性包括：
fullscreen //yes或no，仅限于IE，表示是否最大化
height、width、left、top
location //是否显示地址栏，yes或no
menubar //是否显示菜单栏
resizable //是否可以通过拖拽窗口进行缩放大小
scrollbars //是否允许滚动
status //是否显示状态栏
toolbar //是否显示工具栏
有些浏览器不支持开发者操作窗口的位置和大小，但是允许操作通过window.open创建的窗口。
使用window.close()可以关闭窗口，仅适用于window.open()打开的窗口。这类窗口有opener和closed两个属性，closed的作用仅用于判断窗口是否关闭，opener属性一直指向打开此窗口的窗口的window，也就是：_newWin.opener == window;
间歇调用和超时调用
这也就是我们经常用的setInterval和setTimeout。
这里先说setTimeout，它接受两个参数，第一个含义是执行的代码或方法，格式可以是字符串或者是function，第二个参数含义是超过多少毫秒将第一个参数推到待执行队列中，记住并不是立即执行，除非当前等待队列为空，还有一个要注意的，setTimeout和后面将要讲解的setInterval的第一个参数方法中的变量都是作用于全局变量的，如果其中使用了this，this则指向window或者undefined
setInterval与setTimeout参数类似，它代表间隔多长时间执行一次方法，如果没有clearInterval，则会一直执行，直到崩。有时后一个调用可能在前一个调用还没有执行结束时就执行，所以真实情况下很少使用它，而是使用setTimeout去实现它。
系统对话框
这里的知识点比较少，系统对话框大致有alert（警告）、confirm（确认）、prompt（带有文本框），这里的对话框样式只跟电脑的操作系统和浏览器设置有关，并不是页面设置的。系统对话框一旦弹出，代码就会停止运行，等系统对话框消失之后才会继续运行
网友评论