BOM（Browser Object Model，浏览器对象模型）是 JavaScript 与浏览器交互的核心 API 集合。它提供了操作浏览器窗口、标签页、历史记录、导航栏、屏幕信息等能力，让开发者能够控制浏览器的行为，而不仅仅是操作网页文档（DOM）。与 DOM（文档对象模型）不同，BOM 没有统一的官方标准，但各主流浏览器实现了事实上的兼容集，主要包括window、navigator、screen、history、location等对象。本文将从实用角度全面解析 BOM 的各个组成部分及其应用场景。一、BOM 的核心：window 对象window是 BOM 的顶层对象，代表浏览器窗口或标签页。在浏览器中，window既是全局对象（所有声明的全局变量和函数都是它的属性），又是 JavaScript 代码运行的顶级环境。1.1 窗口尺寸与滚动// 获取视口尺寸（不含滚动条） const viewportWidth = window.innerWidth; const viewportHeight = window.innerHeight; // 获取浏览器窗口外部尺寸（包含工具栏、滚动条等） const outerWidth = window.outerWidth; const outerHeight = window.outerHeight; // 滚动窗口 window.scrollTo(0, 100); // 滚动到 (100px, 100px) window.scrollTo({ top: 100, behavior: 'smooth' }); // 平滑滚动 window.scrollBy(0, 50); // 相对当前位置向下滚动 50px // 获取滚动距离 const scrollX = window.scrollX || window.pageXOffset; const scrollY = window.scrollY || window.pageYOffset;1.2 对话框：alert、confirm、prompt// 警告框（阻塞，仅显示信息） alert('操作成功'); // 确认框（返回布尔值） const isConfirmed = confirm('确定删除该项吗？'); if (isConfirmed) { /* 执行删除 */ } // 输入框（返回输入的字符串或 null） const userName = prompt('请输入您的姓名', '默认值'); if (userName !== null) console.log(`你好，${userName}`);注意：这些对话框会阻塞主线程，影响用户体验，除简单调试外，生产环境建议使用自定义模态框。1.3 计时器：setTimeout 与 setInterval// 延迟执行（单次） const timeoutId = setTimeout(() = { console.log('3 秒后执行'); }, 3000); clearTimeout(timeoutId); // 取消 // 周期执行（重复） let count = 0; const intervalId = setInterval(() = { console.log(`第 ${++count} 次执行`); if (count === 5) clearInterval(intervalId); }, 1000);最佳实践：使用requestAnimationFrame代替setInterval做动画；避免在计时器中执行耗时任务。1.4 窗口操作：打开、关闭、聚焦// 打开新窗口或标签页 const newWindow = window.open('https://example.com', '_blank', 'width=800,height=600'); // _blank: 新标签页; _self: 当前页; _parent: 父框架; _top: 顶层框架 // 关闭当前窗口（仅对通过脚本打开的窗口有效） window.close(); // 聚焦/失焦 window.focus(); window.blur(); // 移动/调整窗口（受浏览器安全策略限制，通常仅对弹出窗口有效） window.moveTo(100, 100); window.resizeTo(800, 600);1.5 页面生命周期事件// DOM 加载完成（无需等待图片等资源） window.addEventListener('DOMContentLoaded', () = { console.log('DOM 就绪，可以安全操作 DOM'); }); // 页面完全加载（包括所有资源） window.addEventListener('load', () = { console.log('所有资源加载完成'); }); // 页面卸载前（常用于提示用户保存未保存的更改） window.addEventListener('beforeunload', (event) = { event.preventDefault(); // 大多数浏览器需要 preventDefault 才能显示提示 event.returnValue = ''; // 兼容旧浏览器 }); // 页面关闭/卸载时 window.addEventListener('unload', () = { // 此处的异步请求可能不可靠，建议使用 sendBeacon navigator.sendBeacon('/log', data); });
