JavaScript中的BOM对象详解

1、BOM简介

BOM(Browser Object Model) 即浏览器对象模型,主要是指一些浏览器内置对象如:window、history、navigator、location、screen等对象,用于完成一些操作浏览器的特定API。用于描述这种对象与对象之间层次关系的模型,浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成,其中代表浏览器窗口的Window对象是BOM的顶层对象,其他对象都是该对象的子对象。

  • BOM是browser object model的缩写,简称浏览器对象模型;
  • BOM提供了独立于内容而与浏览器窗口进行交互的对象;
  • 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是window;
  • BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性;
  • BOM缺乏标准,JavaScript语法的标准化组织是ECMA,DOM的标准化组织是W3C;
  • BOM最初是Netscape浏览器标准的一部分。

2、BOM结构图

从上图可以看出:DOM是属于BOM的一个属性。window对象是BOM的顶层(核心)对象,所有对象都是通过它延伸出来的,也可以称为window的子对象。

由于window是顶层对象,因此调用它的子对象时可以不显示的指明window对象。

3、window对象

window对象在浏览器中具有双重角色:它既是ECMAscript规定的全局global对象,又是javascript访问浏览器窗口的一个接口。Window 对象代表一个浏览器窗口或一个框架。Window 对象会在<body><frameset>每次出现时被自动创建。

window对象常用属性和方法:

//关闭窗口
window.close();
//弹出一个具有OK按钮的系统消息框,显示指定的文本
window.alert("message");
//弹出一个具有OK和Cancel按钮的询问对话框,返回一个布尔值
window.confirm("Are you sure?");
//提示用户输入信息,接受两个参数,即要显示给用户的文本和文本框中的默认值,将文本框中的值作为函数值返回
window.prompt("What's your name?", "Default");
//可以使状态栏的文本暂时改变
window.status;
//默认的状态栏信息,可在用户离开当前页面前一直改变文本
window.defaultStatus;
//设置在指定的毫秒数后执行指定的代码,接受2个参数,要执行的代码和等待的毫秒数
window.setTimeout("alert('xxx')", 1000);
//取消还未执行的暂停,将暂停id传递给它
window.clearTimeout("id");
//无限次地每隔指定的时间段重复一次指定的代码,参数同setTimeout()一样
window.setInterval(function () {
}, 1000);
//取消时间问隔,将问隔id传递给它
window.clearInterval("id");

//访问浏览器窗口的历史,负数为后退,正数为前进
window.history.go(-1);
//同上
window.history.back();
//同上
window.history.forward();
//可以查看历史中的页面数
window.history.length;
//取消山setInterval()设置的 timeout。
clearInterval();
//取消由 setTimeout()方法设置的 timeout。
clearTimeout();
//可相对窗口的当前坐标把它移动指定的像素。
moveBy(0, 0);
//把窗口的左上角移动到一个指定的坐标。
moveTo(100, 100);

//打开一个新的浏览器窗口或查找一个已命名的窗口。
open("url", "target");
//打印当前窗口的内容。
print();
//按照指定的像素调整窗口的大小。
resizeBy(100, 100);
//把窗口的大小调整到指定的宽度和高度。
resizeTo(100, 100);
//按照指定的像素值来滚动内容。
scrollBy();
//把内容滚动到指定的坐标。
scrollTo();

4、history对象

history对象保存着用户上网的历史记录,使用go()实现在用户的浏览记录中跳转。

history对象常用属性和方法:

//后退一页
history.back();
//等价于history.back()
history.go(-1);
//前进一页
history.forward();
//等价于 history.forward()
history.go(1);
//跳转到指定网址
history.go('jb51.net');
//返回历史列表中的网址数
history.length;

5、navigator对象

这个对象代表浏览器实例,其属性很多,但常用的不太多。如下:

navigator对象常用属性和方法:

//返回由客户机发送服务器的user-agent 头部的值
navigator.userAgent;
//返回运行浏览器的操作系统平台
navigator.platform;
//返回浏览器的名称。
navigator.appName;
//返回指明浏览器中是否启用 cookie 的布尔值。
navigator.cookieEnabled;
//指定是否在浏览器中启用Java
navigator.javaEnabled();

6、location对象

location对象提供了当前窗口加载的文档的相关信息,还提供了一些导航功能。事实上,这是一个很特殊的对象,location既是window对象的属性,又是document对象的属性。

location对象常用属性和方法:

//返回url中的hash,如果不包含#后面的内容,则返回空字符串。
location.hash;
//返回服务器名称和端口号
location.host;
//返回端口号
location.port;
//返回服务器名称
location.hostname;
//返回当前加载页面的完整url
location.href;
//返回url中的目录和文件名
location.pathname;
//返回页面使用的协议 http/https
location.protocol;
//返回url中的查询字符串
location.search;
//改变浏览器的位置:
location.href = "http://www.baidu.com";
//改变访问的地址,如果使用location.replace,不会在历史记录中生成新纪录,用户不能回到前一个页面。
location.replace('http://www.baidu.com');
//重置当前页面,可能从缓存,也可能从服务器;如果强制从服务器取得,传入true参数
location.reload();

7、screen 对象

screen 对象包含有关客户端显示屏幕的信息。没有应用于 screen 对象的公开标准,不过所有浏览器都支持该对象。

screen 对象常用属性和方法:

//返回屏幕的高度(不包括Windows任务栏)
screen.availHeight;
//返回屏幕的宽度(不包括Windows任务栏)
screen.availWidth;
//返回目标设备或缓冲器上的调色板的比特深度
screen.colorDepth;
//返回屏幕的总高度
screen.height;
//返回屏幕的颜色分辨率(每象素的位数)
screen.pixelDepth;
//返回屏幕的总宽度
screen.width;
(完)