前言

在前端开发中，我们不仅需要操作页面元素（DOM），还需要和浏览器本身进行交互，这就离不开 BOM（浏览器对象模型）。BOM 是连接 JavaScript 与浏览器的桥梁，掌握它可以实现窗口控制、页面跳转、获取浏览器信息、弹窗交互等核心功能，是前端工程师必备的基础技能。

一、BOM 核心概念

1. 什么是 BOM？

BOM（Browser Object Model，浏览器对象模型） 是 JavaScript 与浏览器交互的接口，它提供了一系列对象，允许我们获取浏览器配置、控制窗口行为、操作页面地址等，不受 HTML 页面标准的约束。

2. BOM 核心：window 对象

BOM 的顶层对象是 window，它是浏览器的一个实例，也是 JavaScript 中的全局对象，具备两个核心特性：

1. 所有全局变量、全局函数都会自动成为 window 对象的成员（调用时可省略 window.，如 alert() 等价于 window.alert()）；
2. DOM 的 document 对象是 window 的一个属性（window.document 等价于 document）。

简单来说：BOM 包含 DOM，window 是 BOM 的核心。

---

二、JavaScript 窗口操作

window 对象提供了一组方法，用于控制浏览器窗口的打开、关闭、移动、缩放，注意：脚本仅能控制自身创建的窗口，无法修改非脚本打开的窗口。

表格

方法	描述
window.open()	打开新窗口（可指定 URL、窗口名称、窗口样式）
window.close()	关闭当前窗口
window.moveTo(x,y)	将窗口移动到指定坐标 (x,y)
window.resizeTo(width,height)	调整窗口到指定宽高

代码示例

javascript

运行

// 打开新窗口：URL为百度，窗口名称为newWin，宽800高600
let newWin = window.open("https://www.baidu.com", "newWin", "width=800,height=600");

// 关闭新打开的窗口
newWin.close();

// 移动窗口到坐标(100,100)
newWin.moveTo(100, 100);

// 调整窗口大小为500x500
newWin.resizeTo(500, 500);

---

三、JavaScript 尺寸信息获取

开发中常需要获取屏幕尺寸、浏览器窗口尺寸、页面元素尺寸，window 对象和元素属性提供了便捷方案：

表格

属性 / 方法	描述
window.screen.availWidth	屏幕可用宽度（排除任务栏）
window.screen.availHeight	屏幕可用高度（排除任务栏）
window.innerWidth	浏览器窗口可视宽度（包含滚动条）
window.innerHeight	浏览器窗口可视高度（包含滚动条）
元素.offsetWidth	指定元素的宽度（包含边框、内边距）
元素.offsetHeight	指定元素的高度（包含边框、内边距）

代码示例

javascript

运行

// 获取屏幕尺寸
console.log("屏幕可用宽：", window.screen.availWidth);
console.log("屏幕可用高：", window.screen.availHeight);

// 获取浏览器窗口尺寸
console.log("窗口可视宽：", window.innerWidth);
console.log("窗口可视高：", window.innerHeight);

// 获取页面元素尺寸
let box = document.getElementById("box");
console.log("元素宽度：", box.offsetWidth);
console.log("元素高度：", box.offsetHeight);

---

四、地址信息与页面跳转（重点）

location 是 window 的核心属性，用于获取当前页面地址信息和实现页面跳转，是前端路由、页面切换的核心 API。

1. 获取地址信息

表格

属性	描述
window.location.hostname	返回 web 主机域名
window.location.pathname	返回当前页面路径 + 文件名
window.location.port	返回 web 主机端口
window.location.protocol	返回使用的协议（http/https）
window.location.href	返回当前页面完整 URL

2. 页面跳转的三种方式

表格

方法	描述	推荐度
window.location.href = "URL"	直接修改 href 属性跳转	⭐⭐⭐⭐⭐（最常用）
window.location.assign("URL")	加载新文档，可返回上一页	⭐⭐⭐
window.location.replace("URL")	替换当前页面，无法返回上一页	⭐⭐⭐

3. 跳转传参（面试 / 开发重点）

页面跳转时，可将数据拼接在 URL 后传递到目标页面，目标页面通过 window.location.search 接收参数。

传参页面（A 页面）

javascript

运行

// 拼接参数：?name=张三&age=20
window.location.href = "target.html?name=张三&age=20";

接收页面（target.html）

javascript

运行

// 获取完整参数：?name=张三&age=20
let params = window.location.search;
// 切割掉开头的?，得到name=张三&age=20
params = params.slice(1);
console.log("传递的参数：", params); // 输出：name=张三&age=20

---

五、JavaScript 历史记录操作

history 对象用于操作浏览器的历史记录，实现页面前进、后退功能，无需记录历史 URL。

表格

方法	描述
window.history.forward()	历史记录前进（等价于浏览器前进按钮）
window.history.back()	历史记录后退（等价于浏览器后退按钮）
window.history.go(number)	跳转到指定历史页：- 负数：后退（如 go (-1) = back ()）- 正数：前进（如 go (1) = forward ()）- 0：刷新当前页面

代码示例

javascript

运行

// 后退一页
history.back();
// 前进一页
history.forward();
// 后退两页
history.go(-2);
// 刷新页面
history.go(0);

---

六、JavaScript 弹窗交互

BOM 提供三种原生弹窗，用于简单的用户交互，无需依赖任何 UI 组件：

表格

方法	描述	返回值
alert("提示内容")	警告框，仅提示信息	无
confirm("确认内容")	确认框，有确认 / 取消按钮	确认→true，取消→false
prompt("提示信息","默认值")	输入框，支持用户输入内容	确认→输入值，取消→null

代码示例

javascript

运行

// 警告框
alert("操作成功！");

// 确认框
let isDel = confirm("确定删除该数据吗？");
if(isDel){
    console.log("用户确认删除");
}

// 输入框
let userName = prompt("请输入您的姓名：", "张三");
if(userName !== null){
    console.log("用户输入的姓名：", userName);
}

---

七、浏览器信息获取

navigator 对象用于获取浏览器的配置信息，注意：该信息存在误导性，不建议用于检测浏览器版本，仅作为了解。

表格

属性	描述
navigator.appCodeName	浏览器代号
navigator.appName	浏览器名称
navigator.appVersion	浏览器版本
navigator.cookieEnabled	是否启用 cookie（true/false）
navigator.platform	操作系统类型
navigator.userAgent	用户代理信息（最常用）
navigator.systemLanguage	用户系统语言

代码示例

javascript

运行

console.log("浏览器代号：", navigator.appCodeName);
console.log("是否启用Cookie：", navigator.cookieEnabled);
console.log("操作系统：", navigator.platform);
console.log("用户代理：", navigator.userAgent);

---

八、总结

本文全面梳理了 JavaScript BOM 的核心知识点，总结如下：

1. BOM 是 JS 与浏览器交互的核心，顶层对象为 window，全局属性 / 方法都属于 window；
2. 常用功能：窗口操作、尺寸获取、页面跳转（href 最常用）、跳转传参、历史记录、弹窗；
3. 重点掌握：location.href 跳转、跳转传参、三种弹窗、尺寸获取；
4. 了解内容：navigator 获取浏览器信息（不用于版本检测）。

BOM 是前端基础中的核心，熟练使用这些 API，能大幅提升开发效率，后续学习前端路由、框架开发也会更加轻松！