JS 浏览器BOM
学习 window/location/history/navigator · 难度：进阶 · +15XP
JavaScript BOM 浏览器对象模型
BOM（Browser Object Model，浏览器对象模型）是浏览器提供的一组对象，允许 JavaScript 与浏览器窗口进行交互。BOM 的核心是 window 对象，它既是全局对象也是浏览器窗口的抽象表示。常见的 BOM 对象包括 location、navigator、screen、history 等。
Window 对象核心方法
| 方法/属性 | 说明 | 示例 |
|---|---|---|
window.innerWidth | 视口宽度（含滚动条） | 1920 |
window.innerHeight | 视口高度 | 937 |
window.scrollTo(x, y) | 滚动到指定位置 | scrollTo(0, 500) |
window.open(url) | 打开新窗口 | open("https://example.com") |
window.alert(msg) | 弹出警告框 | alert("Hello") |
window.confirm(msg) | 确认对话框（返回布尔值） | confirm("确定？") |
window.prompt(msg, def) | 输入对话框 | prompt("输入名字") |
Location 对象：URL 操作
location.href获取或设置完整 URLlocation.reload()重新加载页面location.replace(url)替换当前页面（不产生历史记录）
// location 对象常用属性和方法
console.log(location.href); // "https://example.com/path?key=val#hash"
console.log(location.host); // "example.com"
console.log(location.hostname); // "example.com"
console.log(location.pathname); // "/path"
console.log(location.search); // "?key=val"
console.log(location.hash); // "#hash"
console.log(location.protocol); // "https:"
console.log(location.origin); // "https://example.com"
// 获取查询参数
const params = new URLSearchParams(location.search);
console.log(params.get("key")); // "val"
// 页面跳转的几种方式
location.href = "/new-page"; // 跳转（可返回）
location.assign("/new-page"); // 同上
location.replace("/new-page"); // 替换当前页（不可返回）
location.reload(); // 刷新页面
History 与 Navigator
// History 对象：浏览器历史记录管理
history.back(); // 后退
history.forward(); // 前进
history.go(-2); // 后退两页
history.pushState({ page: 1 }, "", "/page/1"); // 添加历史记录（SPA 路由）
history.replaceState({ page: 2 }, "", "/page/2"); // 替换当前记录
// 监听历史记录变化（用户点击前进/后退按钮）
window.onpopstate = (event) => {
console.log("状态:", event.state);
};
// Navigator 对象：浏览器和设备信息
console.log(navigator.userAgent); // 用户代理字符串
console.log(navigator.language); // "zh-CN"
console.log(navigator.onLine); // 是否在线
console.log(navigator.cookieEnabled); // Cookie 是否启用
console.log(navigator.hardwareConcurrency); // CPU 核心数
// 监听网络状态变化
window.addEventListener("online", () => console.log("网络已连接"));
window.addEventListener("offline", () => console.log("网络已断开"));