【JavaScript-Day 35】从 window 到 location，一文掌握浏览器对象模型 BOM

Langchain系列文章目录

01-玩转LangChain：从模型调用到Prompt模板与输出解析的完整指南
02-玩转 LangChain Memory 模块：四种记忆类型详解及应用场景全覆盖
03-全面掌握 LangChain：从核心链条构建到动态任务分配的实战指南
04-玩转 LangChain：从文档加载到高效问答系统构建的全程实战
05-玩转 LangChain：深度评估问答系统的三种高效方法（示例生成、手动评估与LLM辅助评估）
06-从 0 到 1 掌握 LangChain Agents：自定义工具 + LLM 打造智能工作流！
07-【深度解析】从GPT-1到GPT-4：ChatGPT背后的核心原理全揭秘
08-【万字长文】MCP深度解析：打通AI与世界的“USB-C”，模型上下文协议原理、实践与未来

Python系列文章目录

PyTorch系列文章目录

机器学习系列文章目录

深度学习系列文章目录

Java系列文章目录

JavaScript系列文章目录

01-【JavaScript-Day 1】从零开始：全面了解 JavaScript 是什么、为什么学以及它与 Java 的区别
02-【JavaScript-Day 2】开启 JS 之旅：从浏览器控制台到 ＜script＞ 标签的 Hello World 实践
03-【JavaScript-Day 3】掌握JS语法规则：语句、分号、注释与大小写敏感详解
04-【JavaScript-Day 4】var 完全指南：掌握变量声明、作用域及提升
05-【JavaScript-Day 5】告别 var 陷阱：深入理解 let 和 const 的妙用
06-【JavaScript-Day 6】从零到精通：JavaScript 原始类型 String, Number, Boolean, Null, Undefined, Symbol, BigInt 详解
07-【JavaScript-Day 7】全面解析 Number 与 String：JS 数据核心操作指南
08-【JavaScript-Day 8】告别混淆：一文彻底搞懂 JavaScript 的 Boolean、null 和 undefined
09-【JavaScript-Day 9】从基础到进阶：掌握 JavaScript 核心运算符之算术与赋值篇
10-【JavaScript-Day 10】掌握代码决策核心：详解比较、逻辑与三元运算符
11-【JavaScript-Day 11】避坑指南！深入理解JavaScript隐式和显式类型转换
12-【JavaScript-Day 12】掌握程序流程：深入解析 if…else 条件语句
13-【JavaScript-Day 13】告别冗长if-else：精通switch语句，让代码清爽高效！
14-【JavaScript-Day 14】玩转 for 循环：从基础语法到遍历数组实战
15-【JavaScript-Day 15】深入解析 while 与 do…while 循环：满足条件的重复执行
16-【JavaScript-Day 16】函数探秘：代码复用的基石——声明、表达式与调用详解
17-【JavaScript-Day 17】函数的核心出口：深入解析 return 语句的奥秘
18-【JavaScript-Day 18】揭秘变量的“隐形边界”：深入理解全局与函数作用域
19-【JavaScript-Day 19】深入理解 JavaScript 作用域：块级、词法及 Hoisting 机制
20-【JavaScript-Day 20】揭秘函数的“记忆”：深入浅出理解闭包（Closure）
21-【JavaScript-Day 21】闭包实战：从模块化到内存管理，高级技巧全解析
22-【JavaScript-Day 22】告别 function 关键字？ES6 箭头函数 (=>) 深度解析
23-【JavaScript-Day 23】告别繁琐的参数处理：玩转 ES6 默认参数与剩余参数
24-【JavaScript-Day 24】从零到一，精通 JavaScript 对象：创建、访问与操作
25-【JavaScript-Day 25】深入探索：使用 for...in 循环遍历 JavaScript 对象属性
26-【JavaScript-Day 26】零基础掌握JavaScript数组：轻松理解创建、索引、长度和多维结构
27-【JavaScript-Day 27】玩转数组：push, pop, slice, splice 等方法详解与实战
28-【JavaScript-Day 28】告别繁琐循环：forEach, map, filter 数组遍历三剑客详解
29-【JavaScript-Day 29】数组迭代进阶：掌握 reduce、find、some 等高阶遍历方法
30-【JavaScript-Day 30】ES6新特性：Set与Map，让你的数据管理更高效！
31-【JavaScript-Day 31】对象的“蓝图”详解：构造函数、new 与 instanceof 完全指南
32-【JavaScript-Day 32】深入理解 prototype、__proto__ 与原型链的奥秘
33-【JavaScript-Day 33】深入浅出 ES6 Class：从入门到精通面向对象新姿势
34-【JavaScript-Day 34】前后端数据交互的通用语：深入解析JSON
35-【JavaScript-Day 35】从 window 到 location，一文掌握浏览器对象模型 BOM

---

---

前言

在之前的学习中，我们花了大量时间在 JavaScript 的核心语法、数据结构以及如何通过 DOM (文档对象模型) 来操作网页的内容。但是，JavaScript 的能力远不止于此。它还能与浏览器本身进行“对话”，控制窗口、获取浏览器信息、管理浏览历史等。实现这一切的桥梁，就是我们今天的主角——BOM (Browser Object Model，浏览器对象模型)。如果说 DOM 是 JS 管理网页内容的 API，那么 BOM 就是 JS 控制浏览器窗口的 API。这篇文章将带你系统地认识 BOM，解锁 JS 在浏览器环境下的更多强大能力。

---

一、什么是 BOM (浏览器对象模型)？

BOM，即浏览器对象模型，它提供了一系列独立于网页内容、可以与浏览器窗口进行交互的对象。与 W3C 标准化的 DOM 不同，BOM 长期以来没有统一的标准，导致不同浏览器的实现存在差异，但现代浏览器已经对许多核心功能提供了相似的支持。

BOM 的核心是 window 对象，它既是访问浏览器功能的入口，也是 ECMAScript 在浏览器环境下的全局作用域。

1.1.1 BOM 与 DOM 的关系

我们可以通过一个简单的比喻来理解：

• 浏览器就像一个房子。
• BOM 是房子的设施，比如窗户、门、信箱。通过 BOM，你可以控制窗户的大小 (window.resizeTo())、开关 (window.open()/close())、查看地址 (location.href)。
• DOM 是房子里的家具和装饰，比如墙上的画、桌子、椅子。通过 DOM，你可以移动画的位置、改变桌子的颜色。

两者协同工作，window 对象是它们的顶层宿主。

---

二、核心中的核心：window 对象

window 对象是 BOM 结构的最顶层，也是浏览器环境下的全局对象。

2.1.1 window 对象的双重身份

（1） BOM 的根对象

所有 BOM 对象（如 navigator, location, screen 等）都是 window 对象的属性。调用它们时，可以省略 window 前缀。

// 这两行代码是等价的
console.log(window.location.href);
console.log(location.href); // 更常用

（2） 全局作用域

在全局作用域中声明的任何变量 (var、let、const)、函数，都会成为 window 对象的属性或方法（尽管 let 和 const 声明的全局变量不会挂载到 window 上，但它们的作用域仍然是全局的）。

var globalVar = "我是一个全局变量";
function sayHello() {console.log("Hello, BOM!");
}console.log(window.globalVar); // 输出: "我是一个全局变量"
window.sayHello();             // 输出: "Hello, BOM!"

注意： 将所有变量都定义在全局作用域中是一种不好的实践，容易造成命名冲突和维护困难。应尽量使用函数作用域或块级作用域来封装变量。

---

三、BOM 核心对象详解

接下来，我们将深入探索 window 对象下几个最常用、最重要的子对象。

3.1 navigator 对象：浏览器探测器

navigator 对象包含了有关浏览器的信息，常用于检测用户的客户端环境。

3.1.1 常用属性

属性	描述
navigator.userAgent	返回由浏览器发送的 User-Agent 头部字符串，包含浏览器、版本、操作系统等信息。
navigator.language	返回浏览器的首选语言。
navigator.platform	返回浏览器运行的操作系统平台。
navigator.onLine	返回一个布尔值，表示浏览器当前是否连接到网络。
navigator.geolocation	提供地理位置 API，可用于获取用户设备的地理位置（需要用户授权）。

3.1.2 应用场景：识别用户环境

// 获取并显示用户代理信息
const ua = navigator.userAgent;
console.log(`你的 User Agent 是: ${ua}`);// 一个非常基础的移动端检测
if (/Mobi|Android|iPhone/i.test(ua)) {console.log("你可能正在使用移动设备访问。");
} else {console.log("你可能正在使用桌面设备访问。");
}console.log(`你的浏览器语言是: ${navigator.language}`);

注意： userAgent 可以被用户或浏览器扩展修改，因此基于它来判断浏览器类型的功能要谨慎使用。优先考虑“特性检测”而非“浏览器检测”。

3.2 location 对象：URL 的掌控者

location 对象用于获取或设置当前页面的 URL 信息，并且可以用于导航到新的页面。

3.2.1 常用属性与方法

类型	名称	描述	示例 (以 https://example.com:8080/path/page.html?q=js#sec1)
属性	href	完整的 URL	https://example.com:8080/path/page.html?q=js#sec1
	protocol	协议	https:
	hostname	主机名	example.com
	port	端口号	8080
	pathname	路径部分	/path/page.html
	search	查询字符串 (从 ? 开始)	?q=js
	hash	哈希值/锚点 (从 # 开始)	#sec1
方法	assign(url)	加载新页面 (会产生历史记录)	location.assign('https://google.com')
	replace(url)	用新页面替换当前页 (不产生历史记录)	location.replace('https://google.com')
	reload(force)	重新加载当前页 (force=true 时从服务器加载)	location.reload()

3.2.2 应用场景：页面导航与参数获取

// 1. 跳转到新页面
const goToBaidu = () => {console.log("3秒后将跳转到百度...");setTimeout(() => {// location.href = 'https://www.baidu.com'; // 最常用的方式location.assign('https://www.baidu.com');}, 3000);
};// goToBaidu();// 2. 获取 URL 查询参数
function getQueryParam(key) {const searchParams = new URLSearchParams(location.search);return searchParams.get(key);
}// 假设当前 URL 是 ...?id=123&name=test
// console.log(getQueryParam('id')); // 输出 "123"

3.3 history 对象：穿梭时空

history 对象允许你操作浏览器的会话历史记录，即用户在当前标签页访问过的页面。

3.3.1 核心方法

• history.back(): 后退到上一个页面，等同于点击浏览器的“后退”按钮。
• history.forward(): 前进到下一个页面，等同于点击浏览器的“前进”按钮。
• history.go(n): 跳转到历史记录中的某个特定页面。
  • history.go(-1) 等同于 history.back()。
  • history.go(1) 等同于 history.forward()。
  • history.go(0) 等同于刷新当前页。

3.3.2 应用场景：自定义前进后退按钮

<button onclick="history.back()">返回上一页</button>
<button onclick="history.forward()">前进下一页</button>

安全限制： 出于隐私和安全考虑，JavaScript 无法读取 history 对象中完整的 URL 列表，只能进行导航操作。

3.4 screen 对象：洞悉屏幕信息

screen 对象包含有关用户屏幕的信息。

3.4.1 常用属性

属性	描述
screen.width	屏幕的总宽度 (单位: 像素)。
screen.height	屏幕的总高度。
screen.availWidth	屏幕的可用宽度 (减去操作系统界面元素，如任务栏)。
screen.availHeight	屏幕的可用高度。
screen.colorDepth	返回目标屏幕的颜色深度。

3.4.2 应用场景：根据屏幕信息调整行为

// 比如弹出一个占据屏幕可用空间一半的新窗口
function openCenteredWindow() {const width = screen.availWidth / 2;const height = screen.availHeight / 2;const top = (screen.availHeight - height) / 2;const left = (screen.availWidth - width) / 2;// 打开一个新窗口window.open('about:blank', 'newWindow', `width=${width},height=${height},top=${top},left=${left}`);
}

---

四、与时间赛跑：定时器

定时器是 window 对象上非常重要的方法，用于在指定时间后或每隔一段时间执行代码，这是实现异步编程的基础之一。

4.1 一次性定时器：setTimeout 与 clearTimeout

setTimeout(callback, delay) 用于安排一个函数在指定的延迟（毫秒）后执行一次。它会返回一个唯一的 ID，可用于取消定时器。

// 示例：延迟 2 秒后显示问候
console.log("定时器已设置...");const timerId = setTimeout(() => {console.log("你好！这是延迟 2 秒后执行的消息。");
}, 2000);// 如果需要在某个条件下取消这个定时器
// clearTimeout(timerId);
// console.log("定时器已被取消。");

4.2 周期性定时器：setInterval 与 clearInterval

setInterval(callback, interval) 用于每隔指定的时间（毫秒）重复执行一个函数。同样，它也返回一个 ID 用于取消。

// 示例：一个简单的数字时钟
const clockElement = document.getElementById('clock'); // 假设页面有 <div id="clock"></div>const clockTimerId = setInterval(() => {const now = new Date();const timeString = now.toLocaleTimeString(); // 获取本地时间格式 "HH:mm:ss"if (clockElement) {clockElement.textContent = timeString;}console.log(timeString); // 在控制台也打印
}, 1000);// 比如 10 秒后停止时钟
setTimeout(() => {clearInterval(clockTimerId);console.log("时钟已停止。");
}, 10000);

常见陷阱： 如果 setInterval 的回调函数执行时间超过了设定的间隔时间，可能会导致多次调用堆积，引发性能问题。对于需要精确控制的动画或轮询，使用 setTimeout 递归调用是更稳妥的模式。

---

五、与用户交互：三种对话框

BOM 提供了三种简单的、会阻塞程序执行的模态对话框，用于与用户进行基础交互。

5.1 提示框：alert()

显示一条消息和一个“确定”按钮。

alert("这是一个重要的提示！");
console.log("alert 执行完毕后，这行代码才会执行。");

5.2 输入框：prompt()

显示一条消息，一个输入框和一个“确定”/“取消”按钮。

const userName = prompt("请输入你的名字：", "默认值");if (userName !== null) { // 如果用户点击“确定”alert(`你好, ${userName}!`);
} else { // 如果用户点击“取消”或关闭对话框alert("你取消了输入。");
}

5.3 确认框：confirm()

显示一条消息，一个“确定”和一个“取消”按钮。

const isSure = confirm("你确定要删除这条记录吗？");if (isSure) { // 用户点击“确定”，返回 trueconsole.log("用户已确认删除。");
} else { // 用户点击“取消”，返回 falseconsole.log("用户已取消操作。");
}

现代Web开发建议： 这些原生对话框样式简陋、体验不佳，且会阻塞页面渲染和脚本执行。在实际项目中，更推荐使用 HTML/CSS/JS 创建自定义的模态窗口或提示组件，以提供更好的用户体验。

---

六、总结

今天，我们深入探索了 JavaScript 与浏览器进行交互的接口——BOM。掌握 BOM 是前端开发不可或缺的一环，它让我们的代码能够感知并控制浏览器环境。

以下是本文的核心要点回顾：

1. BOM 定义：BOM（浏览器对象模型）是 JavaScript 与浏览器窗口交互的 API 集合，其核心是 window 对象。
2. window 对象：既是 BOM 的顶层对象，也是浏览器环境下的全局作用域。访问其属性和方法时通常可以省略 window 前缀。
3. 核心 BOM 对象：
   • navigator：提供浏览器本身的信息，用于环境侦测。
   • location：掌管页面 URL，可用于获取 URL 各部分信息及页面导航。
   • history：与浏览器会话历史交互，实现前进、后退等功能。
   • screen：提供用户屏幕的相关信息，如分辨率。
4. 定时器：
   • setTimeout / clearTimeout：用于执行一次性的延迟任务。
   • setInterval / clearInterval：用于执行周期性的重复任务。
5. 交互对话框：
   • alert、prompt、confirm 是三种原生的、阻塞式的用户交互方式，但在现代开发中应谨慎使用。

通过学习 BOM，你已经具备了让网页“活”起来的更多能力。在下一篇文章中，我们将正式进入 DOM 的世界，学习如何用 JavaScript 精准地查找和操纵页面上的每一个元素！

---