BOM是什么？JavaScript如何控制浏览器窗口？

偷偷努力，悄无声息地变强，然后惊艳所有人！哈哈，小伙伴们又来学习啦~今天我将给大家介绍《JavaScript的BOM是什么？如何操作浏览器窗口？》，这篇文章主要会讲到等等知识点，不知道大家对其都有多少了解，下面我们就一起来看一吧！当然，非常希望大家能多多评论，给出合理的建议，我们一起学习，一起进步！

BOM是JavaScript与浏览器窗口交互的核心机制，以window对象为顶层和全局对象，提供document、location、history、navigator、screen等属性及open、alert、focus等方法，并支持窗口事件监听与同源跨窗口通信。

BOM（Browser Object Model，浏览器对象模型） 是 JavaScript 与浏览器窗口交互的核心机制。它不是 ECMAScript 标准的一部分，而是由浏览器厂商实现的一套接口，主要围绕 window 对象展开——它是 BOM 的顶层对象，也是全局对象，所有全局变量、函数和内置对象（如 console、setTimeout）都挂载在它下面。

window 对象：BOM 的入口和核心

window 不仅代表当前浏览器窗口，还充当 JavaScript 全局作用域。直接访问变量或调用函数，本质都是在操作 window 的属性或方法。

• window.document → 访问 DOM（文档对象模型），用于操作网页内容
• window.location → 获取或设置当前 URL，可跳转、刷新、解析路径
• window.history → 控制浏览器历史记录（前进、后退、跳转）
• window.navigator → 获取浏览器信息（如 UA、语言、是否启用 Cookie）
• window.screen → 获取屏幕分辨率、可用高度/宽度等设备显示信息

常用窗口操作方法

这些方法直接作用于当前或新窗口，常用于页面跳转、弹窗、控制行为：

• window.open(url, target, features)：打开新窗口或标签页。例如 window.open('https://example.com', '_blank')
• window.close()：关闭当前窗口（仅对脚本打开的窗口有效，多数浏览器禁止关闭手动打开的标签页）
• window.alert(msg)、window.confirm(msg)、window.prompt(msg)：基础交互提示（注意：现代 UI 更推荐自定义模态框）
• window.focus() 和 window.blur()：让窗口获得或失去焦点（适用于多窗口管理场景）

监听窗口生命周期事件

通过监听 window 上的事件，可响应用户对窗口的操作：

• window.addEventListener('load', handler)：整个页面（含图片、样式表等）加载完成时触发
• window.addEventListener('beforeunload', handler)：用户即将离开页面前触发（可用于提示保存未提交数据）
• window.addEventListener('resize', handler)：窗口大小改变时触发（适配响应式布局常用）
• window.addEventListener('scroll', handler)：页面滚动时触发（注意节流优化性能）

跨窗口通信（同源限制下）

若多个窗口同源（协议、域名、端口一致），可通过引用互相访问：

• 用 open() 返回的窗口引用调用其 postMessage() 或读写 .location、.document（需同源）
• 子窗口可通过 window.opener 访问打开它的父窗口
• 不同源窗口之间只能使用 window.postMessage() 进行安全通信，并配合 message 事件监听

不复杂但容易忽略的是：BOM 操作大多依赖 window，而它在浏览器环境中自动存在；但在 Node.js 等非浏览器环境里，window 不存在，BOM 相关代码会报错。做通用库时要注意环境判断。

到这里，我们也就讲完了《BOM是什么？JavaScript如何控制浏览器窗口？》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！