JavaScriptBOM对象详解与使用方法

来到golang学习网的大家，相信都是编程学习爱好者，希望在这里学习文章相关编程知识。下面本篇文章就来带大家聊聊《JavaScript的BOM指浏览器对象模型（Browser Object Model），它提供了一系列对象和方法，用于与浏览器进行交互。BOM的核心对象包括 window、navigator、screen、location 和 history 等。BOM 的主要功能操作浏览器窗口使用 window 对象可以控制浏览器窗口，例如打开新窗口、关闭窗口、调整窗口大小等。示例：// 打开一个新窗口 window.open("https://www.example.com", "_blank"); // 关闭当前窗口 window.close(); // 调整窗口大小 window.resizeTo(800, 600);操作浏览器历史记录使用 history 对象可以访问和操作浏览器的历史记录，如前进、后退、跳转到特定页面等。示例：// 返回上一页 history.back(); // 前进到下一页 history.forward(); // 跳转到指定历史记录 history.go(-1); // 返回上一页获取浏览器信息使用 navigator 对象可以获取浏览器的基本信息，如用户代理字符串、语言、平台等。示例： console.log(navigator.userAgent》，介绍一下，希望对大家的知识积累有所帮助，助力实战开发！

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学习网公众号，一起学习编程~