17370845950

BOM（Browser Object Model）是浏览器厂商形成的事实接口集合，非W3C/ECMA标准；顶层对象为window，包含location、history、navigator、screen、frames等属性，用于JavaScript与浏览器交互。

什么是 BOM？它不是标准，但浏览器都实现了

BOM（Browser Object Model）不是 W3C 或 ECMA 的正式标准，而是浏览器厂商在长期实践中形成的事实接口集合。它描述的是 JavaScript 与浏览器窗口、导航、历史、屏幕等交互时可访问的对象体系。严格来说，window 是 BOM 的顶层对象，其他如 location、history、navigator、screen、frames 都是它的直接属性。

最常用且兼容性好的 BOM 对象有哪些

这些对象在所有现代浏览器中稳定存在，日常开发中高频使用：

• window：全局对象，也是全局作用域本身；window.alert()、window.setTimeout() 等都来自它
• document：虽然属于 DOM，但通过 window.document 暴露，常被误认为 BOM —— 实际上它是 DOM 的入口，BOM 和 DOM 在 window 上交汇
• location：当前 URL 信息，可读写；修改 location.href 会触发跳转，location.search 解析查询参数
• history：操作会话历史；history.pushState() 和 history.back() 常用于 SPA 路由控制
• navigator：提供客户端运行环境信息；navigator.userAgent（已逐渐不推荐）、navigator.onLine、navigator.permissions 等
• screen：获取屏幕尺寸和像素比；screen.width、screen.availHeight、screen.devicePixelRatio
• frames / self / top / parent：处理多 frame 场景下的上下文切换，注意跨域限制会抛出 SecurityError

哪些“看起来像 BOM”的东西其实要小心

有些 API 名字像 BOM，但实际是较新标准或存在兼容性陷阱：

• window.open()：确实是 BOM 方法，但现代浏览器普遍拦截非用户手势触发的弹窗，window.open('url', '_blank') 可能返回 null
• window.scrollTo()：BOM 方法，但旧版 IE 只支持两个数值参数，而现代用法支持 { top, left, behavior: 'smooth' } 对象 —— 后者在 Safari 15.4 之前不支持
• performance：虽挂载在 window.performance 下，但它属于 Performance API（W3C 标准），不是传统 BOM 成员；performance.now() 比 Date.now() 更精准
• localStorage / sessionStorage：属于 Web Storage API，不是 BOM；它们在私密模式下可能抛出 QuotaExceededError，需 try/catch

BOM 没有统一规范，所以兼容性判断要看具体对象和属性

比如 navigator.connection（网络类型检测）在 Chrome/Firefox 中可用，但在 Safari 完全不可用；又比如 window.find() 是 Firefox 独有，Chrome 已移除。判断是否可用，别只查“BOM 支持列表”，而应：

• 查 caniuse.com 搜索具体 API，如 history.pushState
• 运行时检测：

  if ('onLine' in navigator) { /* safe to use */ }

• 避免依赖 window.outerWidth 等受浏览器 UI 影响大的属性做布局计算
• 注意 SSR 场景：Node.js 中没有 window，服务端渲染时访问任何 BOM 对象都会报 ReferenceError: window is not defined

真正容易被忽略的，是 BOM 的“隐式依赖”——比如你以为只是调了个 console.log，结果函数里悄悄用了 location.hostname，一到 Node 环境就崩。写工具函数前，先问一句：它是否真的只操作数据，还是偷偷瞄了一眼浏览器？