BOM是什么？JS操作窗口与历史记录详解

一分耕耘，一分收获！既然都打开这篇《BOM是什么？JavaScript如何操作浏览器窗口和历史记录》，就坚持看下去，学下去吧！本文主要会给大家讲到等等知识点，如果大家对本文有好的建议或者看到有不足之处，非常欢迎大家积极提出！在后续文章我会继续更新文章相关的内容，希望对大家都有所帮助！

BOM是JavaScript中用于与浏览器窗口交互的API集合，核心为window对象；可操作窗口尺寸位置、打开关闭窗口，管理浏览历史（back/forward/pushState等），并提供location、navigator、screen等对象。

BOM（Browser Object Model，浏览器对象模型） 是 JavaScript 中用于与浏览器窗口交互的一套 API 集合。它不是 ECMAScript 标准的一部分，而是由浏览器厂商实现的、针对浏览器环境扩展出来的对象体系。核心是 window 对象——它既是全局对象，也是 BOM 的顶层入口。

操作浏览器窗口：控制尺寸、位置与打开新窗口

通过 window 对象可获取或设置当前窗口状态，也可打开/关闭新窗口：

• 调整窗口大小和位置：
  window.resizeTo(800, 600) 设置宽高；
  window.moveTo(100, 100) 移动到屏幕坐标 (100,100)；
  注意：现代浏览器出于安全限制，通常只允许用户主动触发的操作（如点击按钮）中调用这些方法，且可能忽略或弹出提示。
• 打开新窗口：
  window.open('https://example.com', 'myWin', 'width=600,height=400,menubar=no') 返回新窗口的引用；
  第二个参数是窗口名（可复用），第三个是逗号分隔的特性字符串（如是否显示工具栏、是否可缩放等）；
  若省略 URL，会打开空白页（'about:blank'）。
• 关闭当前或子窗口：
  window.close() 只能关闭由 window.open() 打开的窗口，或在某些旧版浏览器中关闭当前页（现已被大多数浏览器禁用，防止恶意关闭）。

操作浏览历史：前进、后退与跳转

window.history 对象提供对当前窗口会话历史的访问，主要用于单页应用（SPA）的路由管理：

• 基本导航：
  history.back() 相当于点击浏览器“后退”按钮；
  history.forward() 相当于“前进”；
  history.go(-2) 向前/向后跳转指定步数（负数为后退）。
• 修改历史而不刷新页面（HTML5 新增）：
  history.pushState(stateObj, title, url) 在历史栈中添加一条新记录；
  history.replaceState(stateObj, title, url) 替换当前历史记录（不新增）；
  其中 stateObj 是可序列化的 JS 对象（如 {page: 'detail', id: 123}），会在 popstate 事件中传回；
  title 参数目前多数浏览器忽略，建议传空字符串；url 必须同源，否则报错。
• 监听历史变化：
  window.addEventListener('popstate', event => { console.log(event.state); })；
  注意：该事件仅在用户点击前进/后退按钮，或调用 back()/forward()/go() 时触发，pushState/replaceState 不触发。

其他常用 BOM 对象简述

除 window 和 history 外，BOM 还包含：

• location：获取或设置当前 URL（location.href、location.pathname、location.search 等），修改它会立即跳转；
• navigator：提供浏览器信息（如 navigator.userAgent、navigator.onLine）；
• screen：获取屏幕分辨率、可用宽度等（screen.width、screen.availHeight）；
• document：虽属 DOM 范畴，但作为 window.document 存在于 BOM 结构中，是操作网页内容的核心。

基本上就这些。BOM 的重点在于理解 window 是一切的起点，所有浏览器级能力都从它出发。实际开发中，窗口操作受策略限制较多，而 history 和 location 是构建现代前端路由的基础，用得多也更稳定。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~