一.window
BOM的核心对象是window，表示浏览器的一个实例。
在浏览器中，window有两种角色
1.js访问浏览器窗口的一个接口
2.ECMAScript固定的Global对象
1.全局作用域
在全局中定义的变量和函数都是window的属性和方法。
var age = 2;
function say(){
alert(this.age);
}
alert(window.age);
say();
window.say();
但是在全局定义的和直接定义在window上的还是有区别的,直接定义在window上的可以delete；
var age = 2;
window.color = "red";
delete age;
delete window.color;
console.log(window.age);
console.log(window.color)
另外：访问没有定义的变量会抛出错误。
//会抛出错误，因为b没有定义
var a = b;
//不会抛出错误，因为window.b会是一种属性查询，返回undefined
var a = window.b;
后面的很多js对象(location和navigatot)实际上都是window对象的属性
2.窗口关系及框架
利用html的frame标签可以在a页面引用不用的页面，也就是可以引用不同的框架
也就是说可以有多个window对象。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="jquery.min.js"></script>
</head>
<frameset cols="50%,50%">
<frame src="./a.html"/>
<frame src="./b.html"/>
</frameset>
</html>
3.窗口位置
screenLeft：窗口相对于屏幕左边的位置
screenTop：窗口相对于屏幕上边的位置
(IE,chrome,Opera,Safari可以用，但是火狐u不行)
screenX:窗口相对于屏幕左边的位置
screenY:窗口相对于屏幕上边的位置
(Opera浏览器不行)
所以可以用兼容的写法(支持的显示number，不支持的显示undefined)
var leftPos = (type of screenLeft == "number")?screenLeft:screenX;
var topPos = (type of screenTop == "number")?screenTop:screenY;
//调整浏览器位置
moveTo(0,0); //IE有效，移动到0,0坐标
moveBy(10,10); //IE有效，向下和右分别移动10像素
PS：由于此类方法被浏览器禁用较多，用处不大。
4.窗口的大小
Firefox、Safari、Opera和Chrome均为此提供了4个属性：innerWidth和innerHeight，返回浏览器窗口本身的尺寸；outerWidth和outerHeight，返回浏览器窗口本身及边框的尺寸。
console.log(innerWidth); //页面长度
console.log(innerHeight); //页面高度
console.log(outerWidth); //页面长度+边框
console.log(outerHeight); //页面高度+边框
PS：在Chrome中，innerWidth=outerWidth、innerHeight=outerHeight；
PS：IE没有提供当前浏览器窗口尺寸的属性。
在IE以及Firefox、Safari、Opera和Chrome中，document.documentElement.clientWidth和document.documentElement.clientHeight中保存了页面窗口的信息。
PS：在IE6中，这些属性必须在标准模式下才有效；如果是怪异模式，就必须通过document.body.clientWidth和document.body.clientHeight取得相同的信息。
//如果是Firefox浏览器，直接使用innerWidth和innerHeight
var width = window.innerWidth; //这里要加window，因为IE会无效,就不会报错而是undefined
var height = window.innerHeight;
if (typeof width != 'number') { //如果是IE，就使用document
if (document.compatMode == 'CSS1Compat') {
width = document.documentElement.clientWidth;
height = document.documentElement.clientHeight;
} else {
width = document.body.clientWidth; //非标准模式使用body
height = document.body.clientHeight;
}
}
PS：以上方法可以通过不同浏览器取得各自的浏览器窗口页面可视部分的大小。document.compatMode可以确定页面是否处于标准模式，如果返回CSS1Compat即标准模式。
//调整浏览器大小
resizeTo(200,200); //IE有效，调正大小
resizeBy(200,200); //IE有效，扩展收缩大小
PS：由于此类方法被浏览器禁用较多，用处不大。
5.间歇调用和超时调用
JavaScript是单线程语言，但它允许通过设置超时值和间歇时间值来调度代码在特定的时刻执行。前者在指定的时间过后执行代码，而后者则是每隔指定的时间就执行一次代码。
超时调用需要使用window对象的setTimeout()方法，它接受两个参数：要执行的代码和毫秒数的超时时间。
setTimeout("alert('Lee')", 1000);
function box() {
alert('Lee');
}
setTimeout(box, 1000);
setTimeout(function () {
alert('Lee');
}, 1000);
PS：直接使用函数传入的方法，扩展性好，性能更佳。
调用setTimeout()之后，该方法会返回一个数值ID，表示超时调用。这个超时调用的ID是计划执行代码的唯一标识符，可以通过它来取消超时调用。
要取消尚未执行的超时调用计划，可以调用clearTimeout()方法并将相应的超时调用ID作为参数传递给它。
var box = setTimeout(function () {
alert('Lee');
}, 1000);
clearTimeout(box);
间歇调用与超时调用类似，只不过它会按照指定的时间间隔重复执行代码，直至间歇调用被取消或者页面被卸载。设置间歇调用的方法是setInterval()，它接受的参数与setTimeout()相同：要执行的代码和每次执行之前需要等待的毫秒数。
setInterval(function () {
alert('Lee');
}, 1000);
取消间歇调用方法和取消超时调用类似，使用clearInterval()方法。但取消间歇调用的重要性要远远高于取消超时调用，因为在不加干涉的情况下，间歇调用将会一直执行到页面关闭。
var box = setInterval(function () {
alert('Lee');
}, 1000);
clearInterval(box);
但上面的代码是没有意义的，我们需要一个能设置5秒的定时器，需要如下代码：
var num = 0;
var max = 5;
setInterval(function () {
num++;
if (num == max) {
clearInterval(this);
alert('5秒后弹窗！');
}
}, 1000);
一般认为，使用超时调用来模拟间歇调用是一种最佳模式。在开发环境下，很少使用真正的间歇调用，因为需要根据情况来取消ID，并且可能造成同步的一些问题，我们建议不使用间歇调用，而去使用超时调用。
var num = 0;
var max = 5;
function box() {
num++;
if (num == max) {
alert('5秒后结束！');
} else {
setTimeout(box, 1000);
}
}
setTimeout(box, 1000);
PS：在使用超时调用时，没必要跟踪超时调用ID，因为每次执行代码之后，如果不再设置另一次超时调用，调用就会自行停止。
二．location对象
location是BOM对象之一，它提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。事实上，location对象是window对象的属性，也是document对象的属性；所以window.location和document.location等效。
alert(location); //获取当前的URL
location对象的属性
属性 描述的URL内容
hash 如果该部分存在，表示锚点部分
host 主机名：端口号
hostname 主机名
href 整个URL
pathname 路径名
port 端口号
protocol 协议部分
search 查询字符串
location对象的方法
方法 功能
assign() 跳转到指定页面，与href等效
reload() 重载当前URL
repalce() 用新的URL替换当前页面
location.hash = '#1'; //设置#后的字符串，并跳转
alert(location.hash); //获取#后的字符串
location.port = 8888; //设置端口号，并跳转
alert(location.port); //获取当前端口号，
location.hostname = 'Lee'; //设置主机名，并跳转
alert(location.hostname); //获取当前主机名，
location.pathname = 'Lee'; //设置当前路径，并跳转
alert(location.pathname); //获取当前路径，
location.protocal = 'ftp:'; //设置协议，没有跳转
alert(location.protocol); //获取当前协议
location.search = '?id=5'; //设置?后的字符串，并跳转
alert(location.search); //获取?后的字符串
location.href = 'http://www.baidu.com'; //设置跳转的URL，并跳转
alert(location.href); //获取当前的URL
在Web开发中，我们经常需要获取诸如?id=5&search=ok这种类型的URL的键值对，那么通过location，我们可以写一个函数，来一一获取。
function getArgs() {
var args = [];
var qs = location.search.length > 0 ? location.search.substring(1) : '';
var items = qs.split('&');
var item = null, name = null, value = null;
for (var i = 0; i < items.length; i++) {
item = items[i].split('=');
name = item[0];
value = item[1];
args[name] = value;
}
return args;
}
var args = getArgs();
alert(args['id']);
alert(args['search']);
location.assign('http://www.baidu.com');
location.reload();
location.reload(true);
location.replace('http://www.baidu.com');
三．history对象
history对象是window对象的属性，它保存着用户上网的记录，从窗口被打开的那一刻算起。
history对象的属性
属性 描述URL中的哪部分
length history对象中的记录数
history对象的方法
方法 功能
back() 前往浏览器历史条目前一个URL，类似后退
forward() 前往浏览器历史条目下一个URL，类似前进
go(num) 浏览器在history对象中向前或向后
function back() {
history.back();
}
function forward() {
history.forward();
}
function go(num) {
history.go(num);
}
PS：可以通过判断history.length == 0，得到是否有历史记录。