{T}

BOM 概述

浏览器对象模型（Browser Object Model，BOM）提供了与浏览器窗口交互的对象和方法。BOM 的核心是 window 对象，它表示浏览器的一个实例。在浏览器中，window 对象有双重角色，既是通过 JavaScript 访问浏览器窗口的一个接口，又是 ECMAScript 规定的 Global 对象。

ℹ️ BOM 与 DOM 的区别： - DOM：文档对象模型，用于操作 HTML 文档的内容和结构

  • BOM：浏览器对象模型，用于操作浏览器窗口和浏览器本身的功能

BOM 的核心组成

BOM 主要包含以下对象，它们都作为 window 对象的属性存在：

code
window
├── document     → 文档对象（DOM 的入口）
├── location     → URL 信息与导航
├── navigator    → 浏览器与设备信息
├── screen       → 屏幕信息
├── history      → 历史记录管理
├── frames       → 框架集合
├── localStorage → 本地存储
├── sessionStorage → 会话存储
└── ...其他属性和方法

各对象简介

window 对象

window 对象是 BOM 的核心，代表浏览器窗口。它既是全局对象，又提供了窗口操作、定时器、对话框等功能。

主要功能：

  • 全局作用域与全局变量访问

  • 窗口大小、位置控制

  • 定时器（setTimeout、setInterval）

  • 系统对话框（alert、confirm、prompt）

    // ... 中间省略 ...

  • 滚动恢复控制（scrollRestoration）

👉 详细内容请参阅 history 对象

BOM 对象关系图

code
┌─────────────────────────────────────────────────────────────┐
│                        window                               │
│  ┌─────────────────────────────────────────────────────┐   │
│  │                    Global Scope                       │   │
│  │         所有全局变量和函数都挂载于此                    │   │
│  └─────────────────────────────────────────────────────┘   │
│                                                             │
│  ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐       │
│  │ location │ │navigator │ │  screen  │ │ history  │       │
│  │          │ │          │ │          │ │          │       │
│  │ URL信息  │ │浏览器信息│ │ 屏幕信息 │ │ 历史记录 │       │
│  │ 导航功能 │ │ 设备能力 │ │ 显示属性 │ │ 路由控制 │       │
│  └──────────┘ └──────────┘ └──────────┘ └──────────┘       │
│                                                             │
│  ┌──────────────────────────────────────────────────────┐  │
│  │                    document (DOM)                     │  │
│  │                 文档对象模型的入口                     │  │
│  └──────────────────────────────────────────────────────┘  │
└─────────────────────────────────────────────────────────────┘

常见应用场景

场景涉及对象典型用法
页面跳转与重定向locationlocation.href = '/new-page'
获取查询参数location + URLSearchParamsnew URLSearchParams(location.search)
检测设备类型navigatornavigator.userAgent / navigator.maxTouchPoints
网络状态监控navigatornavigator.onLine + online/offline 事件
响应式布局辅助screenscreen.width / screen.orientation
SPA 路由实现historyhistory.pushState() + popstate 事件
定时任务windowsetTimeout() / setInterval()
弹窗通信windowwindow.open() + postMessage()

浏览器兼容性注意事项

⚠️ BOM 没有正式的标准规范，不同浏览器的实现可能存在差异： 1. 属性差异：某些属性在不同浏览器中可能返回不同的值或不存在 2. 方法限制：出于安全考虑，某些方法（如 moveTo、resizeTo）可能被浏览器禁用 3. 移动端差异：移动设备的 BOM 行为可能与桌面端有显著不同 4. 隐私限制：某些 API（如 geolocation）需要用户授权，或仅限 HTTPS 环境 最佳实践：

  • 使用前进行特性检测（'geolocation' in navigator）
  • 提供合理的降级方案
  • 遵循渐进增强原则

学习建议

  1. window 对象是 BOM 的核心，建议优先掌握
  2. location 和 history 是前端路由的基础，SPA 开发必备
  3. navigator 提供丰富的设备能力检测，按需学习
  4. screen 对象使用场景相对较少，了解即可

相关资源