BOM对象

window对象

BOM对象的核心，表示一个浏览器的实例

相当于JS中的global对象，同时又实现了浏览器的一些功能。

所有直接使用的方法都是window的属性，如parseInt alert等

全局作用域●

在全局作用域下声明变量相当于为window对象增加了属性

即var a=1     window.a=1

区别：使用声明语句声明的变量不可以使用delete删除，但是直接在window增加属性可以被删除。

多个window对象

一般情况下一个页面只有一个window对象。

但是如果页面中存在框架(frame)的时候，每个框架都将拥有自己的window对象。

所有的框架都保存在frames对象中，它是一个伪数组。访问对应的框架可以使用frame[name]或者frame[index]

所有的window对象都有name属性，表示当前框架的名字，对应frame标签中的name属性。

top，parent和self

window对象上有三个特殊的属性：top parent self，用于存在多个框架的时候相互访问

top:始终指向最外层的window对象

parent:指向当前window对象的上一层（如果不存在框架，top和parent相等）

self：当前的window对象，没有实际的意义，只是为了和top，parent相互对应。

重要问题●

当页面存在多个window对象的时候，每个window对象都会包含原生类型的构造函数，这些构造函数相互独立，互不相等。这种结构使得在不同的框架下相互传递数据的时候会出现很多奇怪的问题。

经典问题●

判断是否为数组：arr instanceof Array;

结果●

如果arr是在当前框架下定义的，得到的结果为true

如果arr是在其他框架下定义的，并且以参数的形式传递过来的，得到的结果为false。

原因●

arr是其他框架Array的实例，并非当前框架下Array的实例

窗口位置判断

window对象提供了screenTop(Left)或者screenX(Y)两个属性用于获取当前窗口距离屏幕的位置，返回值是个数字，如果需要使用，可以先进行判断，具体代码如下

var left=(typeof window.screenLeft===‘number’)?window.screenLeft:window.screenX

问题●

你取的值可能是错的。不同的浏览器返回结果不同，无法精确取值，所以能不用尽量不用。

窗口大小判断

只能确定页面窗口大小，无法确定浏览器窗口大小

窗口的操作

打开

window.open(URL地址，[目标窗口]，[特性字符串]，[是否取代历史记录])

目标窗口

如果存在同名的frame则在该frame中打开

果不存在，则将新窗口命名为该名称

也可以为_self,_parent,_top,_blank其中之一。

特性字符串●

用于对新开的窗口进行设置，不是对象，是用逗号分隔的字符串，而且不允许存在空格，其中top,left,width,height对应数字，对于其他的设置，它们的值都是yes或no。对这些功能，等号和值都可以省略不写，不同的浏览器支持程度不同（不一定好用）。

exp：window.open(‘http://www.baidu.com’,’_blank’,’width=100,resizable’)

关闭

调用window.open方法后的返回值是window对象，继续调用close方法可以将新打开的窗口关闭。在新窗口的中调用window.opener可以获取原始窗口的window对象。

间歇与超时

setTimeout：一定时间之后执行函数

setInterval：每隔一段时间执行一次函数

注意点●

1 第一个参数可以使用函数，也可以使用字符串，但是推荐使用函数，如果使用字符串，相当于调用了eval函数，对性能有影响。

2 这两个函数的返回值是一个数字类型的ID，如果想要停止函数的运行需要使用对应的clearTimeout和clearInterval

3 JS支持setTimeout和setInterval并不代表支持多线程，它的实际原理是创建一个事件队列，然后将指定的代码移出本次执行，等到下一轮Event Loop时，再检查是否到了指定时间。如果到了，就执行对应的代码；如果不到，就等到再下一轮Event Loop时重新判断。这意味着，setTimeout指定的代码，必须等到本次执行的所有代码都执行完，才会执行。因此setTimeout(fn,0)的意思是将函数放到本次执行的最后。

4 HTML5标准规定，setInterval的最短间隔时间是10毫秒，也就是说，小于10毫秒的时间间隔会被调整到10毫秒。而实际上如果间隔时间设置小于16.7（1000/60）都会对显示造成影响。

5 setIntervel具有累积效应，如果某个操作特别耗时，超过了setInterval的时间间隔，排在

后面的操作会被累积起来，然后在很短的时间内连续触发，这可能或造成性能问题，解决方案是使用setTimeout代理setInterval。具体代码如下：

setTimeout(function(){

    //do something

    setTimeout(arguments.callee,interval);

},interval)

6 由于浏览器刷新问题，使用setTimeout或者setInterval可能造成卡顿，此时可以使用requestAnimationFrame来代替，只接受一个参数，在浏览器刷新的时候运行。

系统对话框

浏览器提供了alert confirm prompt三个方法，用于弹出对话框。

alert接受一个字符串参数，表示对话框的内容，弹出的对话框中仅包含一个确认按钮，没有返回值，仅用于提示。

confirm接受一个字符串参数，表示对话框的内容，一般为提问，并提供确认和取消两个按钮，根据用户的选择返回true和false，用于确认。

prompt接受两个参数，分别表示对话框的内容和对话框中输入框的默认值，返回值为用户的输入内容，用于获取用户输入。

注意点

1.BOM提供的alert confirm prompt三个方法都是阻断式的，即对话框弹出后，所有的JS都停止运行。这种效果是浏览器实现的，使用JS无法模拟。

2.对话框的样式是浏览器自定义的，不同的浏览器中样式不同，而且无法定义。因此在常规开发中基本用于调试，不会真实使用。

location对象

提供了和当前文档相关的信息及导航功能，是最有用的BOM对象之一

既是window对象的属性也是document对象的属性，因此可以用两种方式调用。

location对象的属性及案例（http://www.testurl.com:8080/index/index.html?id=5#content）

hash

设置或返回从井号 (#) 开始的 URL（锚）。

#content

host

设置或返回主机名和当前 URL 的端口号。

www.testurl.com:8080

hostname

设置或返回当前 URL 的主机名。

www.testurl.com

href

设置或返回完整的 URL。

略

pathname

设置或返回当前 URL 的路径部分。

/index/index.html

port

设置或返回当前 URL 的端口号。

8080

protocol

设置或返回当前 URL 的协议。

http

search

设置或返回从问号 (?) 开始的 URL（查询部分）。

?id=5

注意点●

1 通过location.search可以得到字符串形式的参数，但是在正常使用的时候一般需要JSON结构的，推荐自己写方法（或自行百度）进行转换。

2 对location的属性（除hash外）重新设置值的时候页面都会刷新。并且在历史记录中新生成一条记录，点击后退会退到上一个页面。

location对象的方法

assign

接受一个URL，跳转到该地址，并生成一条新的历史记录，相当于location.href=‘xxx’

reload

刷新页面，接受一个布尔类型的参数，表示是否绕过缓存，默认为false，即有可能走缓存

replace

接受一个URL，将当前页面替换为目标页面，不生成新的历史记录

注意点●

虽然执行上面的方法会使页面跳转或者刷新，但是并不代表后面的代码不会执行，这取决于运行时的网络环境和系统运行情况。

history对象

记录用户的访问历史，常用的操作只有三个

history.go(number):前进或后退Number页

history.back():后退，相当于点击了浏览器的后退或history.go(-1)

history.forward()：前进，相当于点击了浏览器的前进或history.go(1)