JavaScript中的BOM

BOM

BOM提供了很多对象，用于访问浏览器的功能，这些功能与任何网页内容无关。

window对象

BOM的核心对象是window，它表示浏览器的一个实例，在浏览器中，window对象有双重角色，它既是通过JavaScript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象，这意味着在网页中定义的任何一个对象、变量和函数，都以window作为其Global对象，因此有权访问parseInt()等方法。

全局作用域

所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法。
全局变量不能通过delete操作符删除，而直接在window对象上定义的属性可以。例如：

var age = 29;
window.color = "red";
delete window.age;
delete window.color;
alert(window.age);        //29
alert(window.color);       //undefined

窗口关系及框架

如果页面中包含框架，则每个框架都拥有自己的window对象，并且保存在frames集合中。

窗口位置

使用下列代码可以跨浏览器取得窗口左边和上边的位置。

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

使用moveTo()和moveBy()可以将窗口精确移动到一个新位置。这两个方法都接收两个参数，moveTo()接收的是新位置的x和y坐标值，moveBy()接收的是在水平和垂直方向上移动的像素数。例如：

window.moveTo(0,0);            //将窗口移动到屏幕左上角
window.moveBy(0,100);          //将窗口下移100像素
window.moveTo(200,300);        //将窗口移动到(200,300)
window.moveBy(-50,0);          //将窗口向左移动50像素

这两个方法都不适用于框架，只能对最外层的window对象使用。

窗口大小

outerWidth和outerHeight返回的是浏览器窗口本身的尺寸；
innerWidth和innerHeight则表示该容器中页面视图区的大小（减去边框宽度）。
取得页面视口大小的方法：

var pageWidth = window.innerWidth;
var 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;
    }
}

resizeTo()和resizeBy()可以调整浏览器窗口的大小，这两个方法都接收两个参数，resizeTo()接收浏览器窗口的新高度和新宽度，resizeBy()接收新窗口与原窗口的宽度和高度之差。例如：

window.resizeTo(100,100);       //调整打100*100
window.resizeBy(100,50);        //调整到200*150
window.resizeTo(300,300);       //调整到300*300

这两个方法都不适用于框架，只能对最外层的window对象使用。

导航和打开窗口

window.open()方法既可以导航到一个特定的URL，也可以打开一个新的浏览器窗口。例如：

window.open("http://www.baidu.com","topFrame");

第二个参数也可以是特殊的窗口名称：_selt、_parent、_top、_blank。

• _selt，在被点中时的同一框架中打开被链接文档（默认）
• _parent，在父框架中打开被链接文档
• _top，在窗口主体中打开被链接文档
• _blank，在新窗口中打开被链接文档

间歇调用和超时调用

JavaScript是单线程语言，但他允许通过设置超时值和间歇时间值来调度代码在特定的时刻执行。前者是在指定的时间过后执行代码，而后者是在每隔指定的时间就执行一次代码。
超时调用setTimeout()方法，它接收两个参数，要执行的代码和以毫秒表示的时间。例如：

setTimeout(function(){
    alert("hello world");
},1000);

调用setTimeout()之后，该方法会返回一个数值ID，表示超时调用。可以调用clearTimeout()方法并将相应的超时调用ID作为参数传递给他，表示取消尚未执行的超时调用计划。例如：

var timeoutId = setTimeout(function(){
    alert("hello world");
},1000);
clearTimeout(timeoutId);

间歇调用的方法是setInterval(),它接收两个参数，要执行的代码和执行之前等待的毫秒数。例如：

setInterval(function(){
    alert("hello world");
},1000);

调用setInterval()方法同样会返回一个间歇调用ID，可以使用clearInterval()方法并传入相应的间隔调用ID，取消尚未执行的间歇调用。例如：

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

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

系统对话框

• alert()方法会向用户显示一个系统对话框，其中包含指定的文本和一个OK（“确定”）按钮。
• confirm()方法也会向用户显示一个系统对话框，除了OK按钮外，还会显示一个Cancel(“取消”)按钮，两个按钮可以让用户决定是否执行给定的操作。例如：

if(confirm("are you sure?")){
    alert("I'm so glad you are sure");
}else{
    alert("I'm sorry to hear you are not sure");    
}

• prompt()方法弹出一个提示框，用于提示用户输入一些文本，除了显示OK和Cancel按钮之外，还会显示一个文本输入域，以供用户在其中输入内容。prompt()方法接收两个参数：要显示给用户的文本提示以及文本输入域的默认值。例如：

var result = prompt("what is your name?","");
if(result != null){
    alert("welcome,"+result);
}

location对象

location是最有用的BOM对象之一，它提供了与当前窗口中加载文档有关的信息，还提供了一些导航功能。location对象的用处不仅表现在它保存着当前文档的信息，还表现在它将URL解析为独立的片段，让开发人员可以通过不同的属性访问这些片段。

navigator对象

识别客户端浏览器的事实标准

screen对象

screen对象在编程中用处不大，基本上只用来表明客户端的能力，包括浏览器窗口外部的显示器的信息，如像素的宽度和高度等。

history对象

history对象保存着用户上网的历史纪录，从窗口被打开的那一刻算起。
go()方法可以在用户的历史记录中任意跳转。

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

也可以简写back()和forward()来代替go()

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

history还有一个length属性，保存着历史记录的数量

if(history.length == 0){
}                               //用户打开窗口的第一个界面