JavaScript BOM(浏览器对象模型)总结

JavaScript有三大组成部分,即ECMAScriptBOM(Browser Object Model浏览器对象模型)DOM(Document Object Model,文档对象模型),而对于Web应用,BOM无疑是真正的核心。BOM提供了一系列的对象用来访问浏览器的功能,这些功能与用DOM操作的任何网页内容无关。

Window 对象

Window对象是BOM的核心,它表示浏览器的一个实例。在网页中定义的一切对象、变量或者是函数,都以window作为其Glbal对象,而由于window对象同时扮演着ECMAScript中Global对象的角色,因此在全局作用域中声明的变量或者函数,都会变成window对象的属性或者方法。

var name = "zrdn";
function satName() {
    alert(this.age);
}
alert(window.name); // zrdn
sayName();      // zrdn
window.sayName();   // zrdn

因为直接声明的全局变量有[[Configurable]]特性,这个特性的值被设置为false,所以这样的全局变量(Window属性)不可以通过delete操作符删除。

var name = "zrdn";
window.windowName = "zrdn";
delete window.name; // flase
delete window.windowName;   // true

尝试访问未声明的变量会抛错,但是通过查询window对象,可以知道某个未声明的变量是否存在。

var newValue = oldValue; // 出错,oldValue未定义
var newValue = window.oldValue; // 返回undefined,因为这是一次属性查询

iframe

如果页面中包含框架,那么每个框架都有自己的window对象,且这些框架保存在iframes集合中,window.iframes就表示该页面所有框架的集合,我们可以通过索引来访问相应的window对象,也可以通过框架的名称(window.name)来访问,例如

window.frames["frameName"];
window.frames.frameName
window.frames[index]

窗口位置

我们有很多的方式来获取和修改窗体的位置,IE,Safari,Opera和Chrome都提供了screenLeftscreenTop属性,分别表示window的相对于屏幕左边和上边的位置。但是Firefox提供的两个对应的属性为screenXscreenY,Safari和Chrome同时支持这两个属性。

我们可以通过判断screenLeftscreenTop两个属性是否存在,从而确定使用这两个属性或者(在Firefox中)使用screenXscreenY来取得窗口的位置。

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

间歇调用与超时调用

我们可以使用setTimeout()setInterval()两个方法来设置超时调用和间歇调用两种功能。

setTimeout()

setTimeout()方法接受两个参数:要执行的代码和以毫秒计的时间。

例如:

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

setTimeout()执行玩后会返回一个数值ID,表示超时调用。我们可以这样把他取消掉:

cleaarTimeout(timeoutId);

setInterval()

setInterval()方法接受的参数与setTimeout()相同:要执行的代码和以毫秒计的时间。

例子:

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

调用setInterval()方法也会返回一个ID,用来取消间歇调用。

clearInterval(intervalId);

location 对象

location对象提供了当前URL的信息。

一些常用属性及说明。

属性名说明
hash设置或返回从井号 (#) 开始的 URL(锚)。
host设置或返回主机名和当前 URL 的端口号。
hostname设置或返回当前 URL 的主机名。
href设置或返回完整的 URL。
pathname设置或返回当前 URL 的路径部分。
port设置或返回当前 URL 的端口号。
protocol设置或返回当前 URL 的协议。
search设置或返回从问号 (?) 开始的 URL(查询部分)。

查询字符串参数

这是一个非常使用广泛的一个传递参数的方法——通过URL来传递参数,虽然可以通过location.search来返回从问号 (?) 开始到URL末尾的内容,但是没有办法逐个返回某个要查询的字符串参数,所以我们可以使用如下代码来具体返回一个要查询的字符串参数:

function getQuery(name){
    var reg=new RegExp("(^|&)"+name+"=([^&]*)(&|$)");
    var r=window.location.search.substr(1).match(reg);
    if(r!=null)
        return unescape(r[2]);
    return null;
}
alert(getQuery("ie"));   // UTF-8

navigator 对象

navigator 对象是一个查询浏览器客户端信息的方法。

属性及说明:

screen 对象

screen 对象主要用来查询浏览器的一些像素颜色等信息,用处不大。

history 对象

history对象顾名思义,保存着用户上网的历史记录。

go() 方法

使用go()方法可以在用户的历史浏览中进行跳转,可以向前也可以向后,这个方法接受一个参数,表示要跳转的整数页数(负数表示向后跳转)。

history.go(-1); // 后退一页
history.go(1);  // 前进一页
history.go(2);  // 前进两页

参考 : 《JavaScript高级程序设计(第3版)》