JavaScript：BOM(浏览器对象模型)

BOM(BrowserObjectModel)也叫浏览器对象模型，描述与浏览器进行交互的方法和接口。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。

JavaScript由三部分组成：ECMAScript,BOM，DOM。BOM提供了很多对象，用于访问浏览器的功能。下面介绍浏览器的三个公共对象：window对象，location对象，history对象。



1、window对象

BOM的核心对象，它表示浏览器的一个实例。window对象处于JavaScript结构的最顶层，对于每个打开的窗口，系统都会自动为其定义window对象。

（1）、全局作用域

由于window对象同时扮演着ECMAscript中Global对象的角色，因此所有全局作用域中声明的变量、函数都会变成window对象的属性和方法。

例如：

var age=29;
function sayAge(){
alert(this.age);
}
alert(window.age);//29
sayAge();//29
window.sayAge();//29

注意：全局变量不能通过delete操作符删除，而直接在window对象上的定义属性可以。

（2）、窗口位置

用来确定和修改window位置的属性和方法有很多。IE、Safari、Opera和Chrome都提供了screenLeft和screenTop属性，分别用于表示窗口相对于屏幕左边和上边的位置。Firefox则在screenX和screenY属性中提供相同的窗口位置信息。使用下面代码可以跨浏览器取得窗口左边和上边的位置：

var leftPos=(typeof window.screenLeft=="number")?
window.screenLeft:window.screenX;
var topPos=(typeof window.screenTop=="number")?
window.screenTop:window.screenX;
alert("leftPos="+leftPos+"   topPos="+topPos);

（3）、窗口大小

虽然最终无法确定浏览器窗口本身的大小，但是却可以取得页面视口的大小，例如：

var pageWidth=window.innerWidth,
pageHeight=window.innerHeight;
if(typeof pageWidth!="number"){
if(document.compatMode=="CSS1Compat"){
pageWidth=document.documentElement.clientWidth;
pageHeight=document.documentElement.clientHeight;
}else{
pageWidth=document.body.clientWidth;
pageHeight=document.body.clientHeight;
}
}
alert("pageWidth="+pageWidth+"   pageWidth="+pageWidth);

（4）、导航和打开窗口

使用window.open()方法既可以导航到一个特定的URL，也可以打开一个新的浏览器窗口，这个方法可以接收4个参数：要加载的URL、窗口目标、一个特性字符串以及一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值。

window.open("http://www.baidu.com","topFrame")
//等价于<a href="http://www.baidu.com" target="topFrame"></a>

弹出窗口：如果第二个参数并不是一个已经存在的窗口或框架，那么该方法就会根据在第三个参数位置上传入的字符串创建一个新窗口或新标签页。例如：

window.open("http://www.baidu.com","topFrame","height:150px,width:150px,top:10px,left:10px,resizable=no");

（5）、间歇调用和超时调用

超时调用需要使用window对象的setTimeout()方法，他接收两个参数：要执行的代码和以毫秒数表示的时间。例如：

var timeoutId=setTimeout(function(){
alert("Hello world");
},1000);//设置超时调用
clearTimeout(timeoutId);//把它取消,前面的不会输

间歇调用的方法是setInterval()，它接收的参数与setTimeout()方法相同，只不过它会按照指定的时间间隔重复执行代码，直至间歇调用被取消或者页面被卸载。例如：

var num=0;
var max=10;
var intervalId=null;
function incrementNumber(){
num++;
if(num==max){
clearInterval(intervalId);
alert("Done");
}
}
intervalId=setInterval(incrementNumber,500);

一般认为使用超时调用来模拟间歇调用是一种最佳的模式，在开发环境下，很少使用真正的间歇调用，原因是后一个间歇调用可能会在前一个间歇调用结束之前启动。使用超时调用来模拟间歇调用程序如下：

var num=0;
var max=10;
var intervalId=null;
function incrementNumber(){
num++;
if(num<max){
setTimeout(incrementNumber,500);
}else{
alert("Done");
}
}
setTimeout(incrementNumber,500);

（6）、系统对话框

浏览器通过alert()、confirm()和prompt()方法可以调用系统对话框向用户显示信息。系统对话框与浏览器中显示的网页没有关系，也不包含HTML。

2、location对象

location是BOM对象之一，它提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。事实上，location对象是window对象的属性，也是document对象的属性；所以window.location和document.location等效。



下表列出了location对象的所有属性：



（1）、查询字符串参数

逐个访问location.search返回从问号到URL末尾的所有内容中的每个查询字符串参数。

function getQueryStringArgs(){
//取得查询字符串并去掉开头的问号
var qs=(location.search.length>0?location.search.substring(1):"");
//保存数据的对象
args={};
//取得每一项
items=qs.length?qs.split("&"):[];
item=null;
name=null;
value=null;
i=0;
len=items.length;
//逐个将每一项添加到args对象中
for(i=0;i<len;i++){
item=items[i].split("=");
name=decodeURIComponent(item[0]);
value=decodeURIComponent(item[1]);
if(name.length){
args[name]=value;
}
}
return args;
}
var args=getQueryStringArgs();
alert(args)

（2）、位置操作

//window.location="http://www.baidu.com"
//location.assign("http://www.baidu.com");
location.href="http://www.baidu.com"
<img src="http://img.blog.csdn.net/20160602212746473?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==
/dissolve/70/gravity/Center" alt="" />

3、history对象

history对象是window对象的属性，它保存着用户上网的记录，从窗口被打开的那一刻算起。



（1）、go()方法可以在用户的历史记录中任意跳转，可以向前也可以向后。

//后退一页
history.go(-1)
//前进一页
history.go(1)
//前进两页
history.go(2)
//跳转到最近的wrox.com页面
history.go("wrox.com");

（2）、back()和forward()方法代替go()

//后退一页
history.back();
//前进一页
history.forward();