浏览器对象模型

定义

浏览器对象模型是浏览器(宿主环境)向脚本提供的、用于处理文档之外全部内容的那些对象的集合。它把浏览器的各个组成部分抽象成可编程的对象，使脚本能够读取和控制浏览器窗口及其运行环境，而不只局限于页面内容本身。^[1]

这套模型的顶层对象是 window。location、history、navigator、screen、frames 等对象都以属性的形式挂在 window 之下，因此常被称作 window 的子对象。window 同时还是 JavaScript 在浏览器中的全局对象，全局作用域中声明的变量与函数实际上都成为它的属性或方法。^[3]

原理

BOM 与 文档对象模型(DOM)是一组容易混淆但分工不同的接口。DOM 面向网页文档内容与结构，把页面映射成节点树；BOM 面向浏览器窗口与运行环境，处理导航、历史记录、屏幕尺寸、浏览器信息等与文档无关的事务。document 是 window 的一个属性，因而在对象的包含关系上可以理解为 BOM 覆盖了 DOM。^[4]

window 在浏览器中充当 ECMAScript 规范中的全局对象。页面脚本里未加前缀的 alert()、setTimeout() 等调用，实际等价于 window.alert()、window.setTimeout()。这种设计使全局变量天然成为 window 的成员，也带来命名空间相互影响的可能。^[3]

各子对象承担不同职责：location 保存当前页面的 URL 各组成部分并可用于跳转；history 保存当前窗口访问过的页面记录，提供 back()、forward()、go() 等方法；navigator 描述浏览器与操作系统的信息，如 userAgent、platform；screen 提供显示器分辨率等参数。^[5]

$window.history.length$ 返回历史列表中的条目数，$window.location.href$ 返回或设置完整 URL。这些对象之间通过 window 的属性关系彼此引用，形成以 window 为根的层次结构。^[6]

发展历程

BOM 最初由 网景公司 的浏览器定义，属于其浏览器标准的一部分，与文档对象模型并未严格区分。早期各浏览器厂商按自身设计扩展 BOM，缺乏统一的规范文本，导致同一接口在不同浏览器中行为不一。^[7]

随着 Web 应用需求增长，各浏览器共有的那部分 BOM 对象逐渐成为事实上的共同标准，厂商也主动向核心接口靠拢。HTML5 及其后续的 HTML 规范把 window 对象、History 接口、Navigator 接口等内容正式写入标准文本，使 BOM 的主要部分有了可遵循的规范依据。^[8]

在规范层面，一些接口的归属被分散到不同文档中。window 接口由 HTML 规范定义，screen 由 CSSOM 视图相关规范定义，navigator 的许多扩展能力则分散在其他规范里。所谓 BOM 更多是习惯上的统称，而不是一份单独规范的名称。^[9]

应用

页面导航是常见用途之一。读取 location.href 可以获得当前地址，为其赋值即可让浏览器加载新页面；location.reload() 用于重新加载当前文档，location.replace() 在替换文档时不会在历史记录中留下条目。^[10]

历史记录操作支撑了前进与后退功能，浏览器中的前进、后退按钮与 history.forward()、history.back() 效果对应。这一能力也是前端路由的基础，单页应用借助历史记录接口在不刷新页面的情况下切换视图。^[11]

窗口尺寸与屏幕信息常用于响应式布局，window.innerWidth 返回窗口内容区的宽度，配合 window.onresize 事件可以在窗口尺寸变化时调整页面。定时器相关方法 setTimeout()、setInterval() 及其清除方法同样由 window 提供。^[5]

不同浏览上下文之间的通信也依赖 BOM 提供的能力。window.postMessage() 允许不同源的窗口、框架或工作线程之间传递消息，调用时需指定目标源，接收方应校验消息的来源，以避免数据被不相关的页面获取。^[12]

局限

BOM 长期缺少统一的专门规范，早期各浏览器实现差异明显，其中以旧版本 Internet Explorer 的差别最大。开发中若直接依赖非核心的扩展接口，往往需要针对不同浏览器编写兼容代码。

基于 navigator 做浏览器判断并不可靠。userAgent 字符串由浏览器自行填写，可以被修改，部分浏览器还会为避免站点检测而伪装自身信息，因此更稳妥的做法是检测具体功能是否存在，而非识别浏览器名称。^[13]

BOM 接口与浏览器环境强绑定，在服务端渲染等非浏览器环境中并不存在。代码若在加载阶段直接访问 window 或 navigator，可能在 Node.js 等环境中报错，通常需要先判断相关对象是否可用。^[14]

跨源访问受到同源策略限制。脚本无法读取其他源的文档、cookie 等 BOM 与 DOM 信息，同源要求协议、域名、端口号完全一致。这既是安全机制，也使得跨源数据交换必须借助受限的替代方案。^[15]

参见

• 文档对象模型 —— 与本词条互为对照，处理网页文档内容与结构。

• JavaScript —— BOM 是其在浏览器中运行时的宿主对象环境。

• HTML5 —— 把 window、history、navigator 等接口纳入标准文本。

• 同源策略 —— 限制脚本跨源读取 BOM 与 DOM 信息的浏览器安全机制。

• 单页应用 —— 借助历史记录接口实现无刷新视图切换。

• Node.js —— 不含 BOM 的 JavaScript 运行环境。