BOM（Browser Object Model）核心对象手册

BOM（Browser Object Model）核心对象手册

核心概念：BOM 提供与浏览器交互的接口，顶层对象为 window（全局作用域）。

---

1. window 对象 🌐

地位：BOM 顶层对象，全局变量/函数均为其属性。
核心功能：

// 窗口控制
window.open('url')      // 打开新窗口
window.close()          // 关闭当前窗口
window.resizeTo(w, h)   // 调整窗口尺寸
window.moveTo(x, y)     // 移动窗口位置// 对话框
alert('消息')            // 警告框
confirm('确定吗？')      // 确认框（返回布尔值）
prompt('输入内容')       // 输入框（返回字符串）// 定时器
const timer = setTimeout(callback, delay)  // 单次执行
const interval = setInterval(callback, delay) // 循环执行
clearTimeout(timer)     // 清除定时器
clearInterval(interval)// 滚动与焦点
window.scrollTo(0, 100) // 滚动到指定位置
window.scrollBy(0, 20)  // 相对当前位置滚动
window.focus()          // 窗口聚焦// 事件监听
window.onload = () => { /* 页面加载完成 */ }
window.onresize = () => { /* 窗口大小变化 */ }

关键属性：

• window.innerWidth / window.innerHeight：视口尺寸
• window.scrollX / window.scrollY：页面滚动距离

---

2. navigator 对象 🔍

作用：获取浏览器/操作系统信息。
常用属性：

navigator.userAgent     // 浏览器标识（如 "Mozilla/5.0 ..."）
navigator.platform      // 操作系统（如 "Win32"）
navigator.language      // 浏览器首选语言（如 "zh-CN"）
navigator.onLine        // 网络状态（布尔值）
navigator.geolocation   // 地理位置接口
navigator.clipboard     // 剪贴板操作接口

---

3. location 对象 📍

作用：操作或解析当前 URL。
URL 解析属性：

https://www.example.com:8080/path?key=value#section
└─ protocol: "https:"         // 协议
└─ host: "www.example.com:8080" // 主机+端口
└─ hostname: "www.example.com" // 主机名
└─ port: "8080"              // 端口
└─ pathname: "/path"         // 路径
└─ search: "?key=value"      // 查询参数
└─ hash: "#section"          // 锚点

导航方法：

location.assign('new.html')   // 跳转（保留历史记录）
location.replace('new.html')  // 替换当前页（无历史记录）
location.reload()             // 重新加载（true 强制忽略缓存）

---

4. history 对象 ⏪⏩

作用：管理浏览器历史记录（SPA 核心）。
方法与事件：

// 基础导航
history.back()          // 后退
history.forward()       // 前进
history.go(-2)          // 后退 2 页// SPA 路由控制
history.pushState(state, '', '/new-url')   // 添加历史记录
history.replaceState(state, '', '/update') // 替换当前记录// 监听导航事件
window.onpopstate = (e) => {console.log(e.state)  // 获取 pushState 传入的 state
}

---

5. screen 对象 💻

作用：获取屏幕信息。
关键属性：

screen.width            // 屏幕总宽度（像素）
screen.height           // 屏幕总高度
screen.availWidth       // 可用宽度（除任务栏等）
screen.availHeight      // 可用高度
screen.colorDepth       // 颜色深度（如 24 位）

---

其他重要说明

1. document 对象：
   • 属于 DOM（通过 window.document 访问），非 BOM 直接部分。
2. frames 对象：
   • 访问 <iframe> 或旧式 <frame> 的窗口对象（window.frames[0]）。
3. BOM 非标准化：
   • 无统一标准（不同于 DOM），部分属性（如 navigator 扩展）可能存在浏览器差异。

---

复习要点总结

对象	核心用途	关键 API
window	全局操作/窗口控制/定时器	open(), setTimeout(), onload
navigator	浏览器环境信息	userAgent, geolocation, clipboard
location	URL 解析与导航	href, search, assign(), reload()
history	历史记录管理（SPA 核心）	pushState(), replaceState(), onpopstate
screen	屏幕属性获取	availWidth, availHeight

💡 提示：BOM 操作需注意浏览器兼容性，推荐使用 Can I use 查询支持情况。