JS 之BOM

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

使用框架时，window.top对象指顶层框架，也就是浏览器窗口。window.parent对象指包含当前窗口的框架，也就是父框架。window.self指的是当前window窗口。

窗口位置

用来确定和修改window对象位置的属性。如下面代码：

var leftPos = (typeof window.screenLeft == 'number') ? window.screenLeft : window.screenX;

var topPos = (typeof window.screenTop == 'number') ? window.screenTop : window.screenY;

screeLeft/screenTop表示从屏幕左边或上边距离window对象所表示的页面的距离。（IE，chrome，Opera，Safari）

screenX/screenY表示浏览器窗口相对于屏幕的坐标。(适用火狐)

窗口大小

innerWidth，innerHeight，outerWidth，outerHeight：四个属性表示浏览器窗口的大小,Firefox,Chrome,Opera,Safari适用。

document.documentElement.clientWidth，document.documentElement.clientHeight或者document.body.clientWidth，document.body.clientHeight：保存页面的视口信息。

相关方法

window.open()：新开窗口

window.setTimeout(funcName,1000)：超时调用，只执行一次

window.clearTimeout(timeoutID)：清除超时调用ID

window.setInterval(funcName,1000)：间歇调用，每隔一段时间执行一次。

window.clearInterval(intervalId)：清除间歇调用ID

使用超时调用来模拟间歇调用是一种最优的模式，原因是间歇调用可能会出现后一个间歇调用在前一个间歇调用未结束前就启动。

alert()，confirm()，prompt()调用系统对话框向用户显示信息

window.find()   //显示“查找”对话框

window.print()    //显示“打印”对话框

location对象

location对象即是window对象的属性，也是document对象的属性。提供了当前浏览器的导航信息。其中修改页面的url：

location.assign('http://www.baidu.com');

locaiton.href = 'http://www.baidu.com';

window.location = 'http://www.baidu.com';

以上方法都是立即打开新的URL并在浏览器的历史记录中生成一条新的记录，通过浏览器的后退按钮都能导航到前一个页面。

location.replace('http://www.baidu.com');  //replace方法接收一个参数，即要导航到的url,使用这个方法不会在浏览器中生成历史记录，无法通过后退按钮返回之前的页面。

location.reload();  //reload方法表示重新加载当前页面，不传参数表示可能从缓存中加载当前页面。

location.reload(true);    //强制从服务器端重新加载当前页面

navigator对象

navigator对象表示与浏览器相关的对象。比较常用的是navigator.userAgent属性监测浏览器的版本信息。

screen对象

screen对象表示浏览器窗口的外部显示器信息。这个对象比较少用。screen.availWidth，screen.availHeight指屏幕的像素宽高。

history对象

window对象中的history对象指用户的浏览器历史记录，虽然无法知道实际的url，但是有以下方法可以实现浏览器的前进后退功能。

history.go(-1)   //后退一页

history.go(1)    //前进一页

history.back()    //后退一页

history.forward()   //前进一页

history.go('baidu.com')    //跳转到历史记录中包含'baidu.com'字符串的链接的第一个位置，如果没有则什么都不做

history.length   指历史记录的个数。如果为0指当前页面是打开窗口的第一个页面

总结自：《javascript 高级程序设计》