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;
- 点赞
- 收藏
- 关注作者
评论（0）