【JavaScript】之浏览器对象模型（BOM）详解

艾伦耶格尔

发布于 2025-08-28 15:32:11

2140

浏览器对象模型 (BOM：Browser Object Model ) 是 JavaScript 的一部分，它允许你与浏览器窗口进行交互。不同于 DOM（文档对象模型）主要处理网页内容，BOM 关注的是浏览器窗口本身及其各种特性，例如导航、窗口大小、浏览器历史记录等等。就是JavaScript将浏览器的各个组成部分封装成了对象。我们要操作浏览器的部分功能，可以通过操作BOM对象的相关属性或者函数来完成。

BOM中提供了如下5个对象：

对象名称	描述
Window	浏览器窗口对象
Navigator	浏览器对象
Screen	屏幕对象
History	历史记录对象
Location	d地址栏对象

一、BOM 的核心：window、 location 对象

window 对象是 BOM 的顶层对象，代表着浏览器窗口本身。所有其他 BOM 对象都是 window 对象的属性。这意味着你可以直接使用 alert() 而不是 window.alert()，因为 window 是全局作用域。

二、window 对象

window对象提供了获取其他BOM对象的属性：

属性	描述
history	用于获取history对象
location	用于获取location对象
Navigator	用于获取Navigator对象
Screen	用于获取Screen对象

也就是说我们要使用location对象，只需要通过代码window.location或者简写location即可使用

window也提供了一些常用的函数，如下表格所示：

函数	描述
alert()	显示带有一段消息和一个确认按钮的警告框。
comfirm()	显示带有一段消息以及确认按钮和取消按钮的对话框。
setInterval()	按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout()	在指定的毫秒数后调用函数或计算表达式。

alert()函数：弹出警告框，函数的内容就是警告框的内容

<script>
    //window对象是全局对象，window对象的属性和方法在调用时可以省略window.
    window.alert("Hello BOM");
    alert("Hello BOM Window");
</script>

confirm()函数：弹出确认框，并且提供用户2个按钮，分别是确认和取消。

confirm("您确认删除该记录吗?");

但是我们怎么知道用户点击了确认还是取消呢？所以这个函数有一个返回值，当用户点击确认时，返回true，点击取消时，返回false。我们根据返回值来决定是否执行后续操作。修改代码如下：再次运行，可以查看返回值true或者false

var flag = confirm("您确认删除该记录吗?");
alert(flag);

点击确定后：true

setInterval(fn,毫秒值)：定时器，用于周期性的执行某个功能，并且是循环执行。该函数需要传递2个参数：

fn:函数，需要周期性执行的功能代码

毫秒值：间隔时间

//定时器 - setInterval -- 周期性的执行某一个函数
var i = 0;
setInterval(function(){
     i++;
     console.log("定时器执行了"+i+"次");
},2000);

刷新页面，浏览器每个一段时间都会在控制台输出，结果如下：

setTimeout(fn,毫秒值) ：定时器，只会在一段时间后执行一次功能。参数和上述setInterval一致

//定时器 - setTimeout -- 延迟指定时间执行一次 
setTimeout(function(){
    alert("JS");
},3000);

浏览器打开，3s后弹框，关闭弹框，发现再也不会弹框了。（以下图片为三秒后弹框）

三、location 对象

window.location 对象: 控制浏览器导航，包含以下常用属性和方法：

href：获取或设置当前 URL。

console.log(window.location.href); // 获取当前URL
window.location.href = "https://www.example.com"; // 跳转到 example.com

hostname：返回当前 URL 的主机名。

console.log(window.location.hostname); // 输出 "www.example.com" (如果当前URL是https://www.example.com)

pathname：返回当前 URL 的路径名。

console.log(window.location.pathname); // 输出 "/path/to/page.html" (如果当前URL是https://www.example.com/path/to/page.html)

reload()：重新加载当前页面。

window.location.reload();

assign()：加载新的 URL。

window.location.assign("https://www.google.com"); // 跳转到 google.com

四、history 对象

window.history 对象: 操作浏览器历史记录。

back()：返回上一页。

window.history.back();

forward()：前进到下一页。

window.history.forward();

go()：跳转到指定页面（相对当前页面）。

window.history.go(-2); // 后退两页
window.history.go(1);  // 前进一页，等同于 forward()

五、navigator 对象

window.navigator 对象: 提供浏览器和操作系统的信息。

userAgent：返回用户代理字符串，包含浏览器版本、操作系统等信息。

console.log(navigator.userAgent); // 输出类似 "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36"

online：指示浏览器是否在线。

if (navigator.online) { 
    console.log("在线"); 
} else {
    console.log("离线");
}

六、获取窗口尺寸和位置

获取浏览器窗口的尺寸和位置：

console.log("Inner Width:", window.innerWidth);
console.log("Inner Height:", window.innerHeight);
console.log("Outer Width:", window.outerWidth);
console.log("Outer Height:", window.outerHeight);
console.log("Screen X:", window.screenX);
console.log("Screen Y:", window.screenY);

window.scrollTo(x, y)：将文档滚动到指定坐标。

window.scrollTo(0, 100); // 垂直滚动到 100px
window.scrollTo({ top: 200, left: 0, behavior: 'smooth' }); // 平滑滚动到顶部 200px，左侧 0px

总结

BOM 为 JavaScript 提供了与浏览器交互的强大能力。理解 BOM 的核心对象和方法，可以让你更好地控制浏览器窗口、处理用户交互和获取浏览器信息，从而创建更丰富的 Web 应用。希望本文和其中的示例能帮助你更好地掌握 JavaScript BOM！

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2025-08-27，如有侵权请联系 cloudcommunity@tencent.com 删除

模型

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度