JavaScript BOM基础

JavaScript BOM基础

介绍

浏览器对象模型（Browser Object Model，简称BOM）是JavaScript与浏览器交互的核心API集合，它允许开发者控制浏览器窗口、导航、历史记录、屏幕等对象。BOM不是W3C标准，但所有主流浏览器都实现了类似的接口。与DOM（文档对象模型）不同，BOM操作的是浏览器本身而非文档内容。

BOM核心对象

以下是BOM的主要对象及其作用：

对象	描述
window	浏览器窗口的顶层对象，所有全局变量和函数都是其属性。
navigator	提供浏览器厂商、版本、操作系统等信息。
location	管理当前页面的URL（读取或重定向）。
history	控制浏览器会话历史（前进/后退）。
screen	获取用户屏幕分辨率、色彩深度等。

详细说明

window对象

window是BOM的根对象，代表浏览器窗口。全局变量和函数实际上是window的属性和方法。

// 示例：使用window对象
console.log(window.innerWidth); // 输出窗口内部宽度
window.alert("Hello BOM!");     // 弹出警告框

navigator对象

获取浏览器信息，常用于特性检测或兼容性处理。

// 检测浏览器类型
console.log(navigator.userAgent); // 输出用户代理字符串
if (navigator.onLine) {
    console.log("用户在线");
}

location对象

操作URL，实现页面跳转或参数解析。

// 重定向到新页面
location.href = "https://example.com";

// 解析URL参数
const params = new URLSearchParams(location.search);
console.log(params.get("id")); // 获取?id=123中的123

history对象

控制浏览器历史记录栈。

// 后退一页
history.back();

// 前进两页
history.go(2);

screen对象

访问屏幕信息，适配响应式设计。

console.log(`屏幕分辨率: ${screen.width}x${screen.height}`);

实际案例

场景：根据屏幕尺寸加载不同资源。

if (screen.width < 768) {
    loadMobileVersion();
} else {
    loadDesktopVersion();
}

高级应用

定时器

BOM提供了setTimeout和setInterval方法：

// 延时执行
setTimeout(() => {
    console.log("3秒后执行");
}, 3000);

// 循环执行
let counter = 0;
const timer = setInterval(() => {
    counter++;
    if (counter >= 5) clearInterval(timer);
}, 1000);

事件监听

通过window监听浏览器事件：

window.addEventListener("resize", () => {
    console.log(`新窗口尺寸: ${window.innerWidth}x${window.innerHeight}`);
});

关系图

graph TD window --> navigator window --> location window --> history window --> screen window --> document(DOM)

注意事项

• BOM方法可能因浏览器而异，需测试兼容性。
• 频繁操作history或location可能导致用户体验问题。
• 现代浏览器已限制部分navigator信息（如精确的插件列表）以保护隐私。

总结

BOM是JavaScript控制浏览器的桥梁，掌握其核心对象（window、navigator等）能实现页面导航、设备适配等关键功能。建议结合DOM操作构建完整的Web应用。