BOM（Browser Object Model）是浏览器提供的一组 API，用于操作浏览器窗口本身。它不是 ECMAScript 语言标准的一部分，而是浏览器厂商扩展出来的功能。常见的核心对象包括：
windowlocationnavigatorscreenhistory
1. window 对象
window 是 BOM 的核心对象，表示当前浏览器窗口或框架。
在浏览器中，window 也作为全局对象存在。所有全局变量和函数都属于 window。
常见属性和方法：
javascript
console.log(window.innerWidth, window.innerHeight);
// 浏览器可视区域宽高（不包括菜单栏、工具栏）
console.log(window.location.href);
// 当前页面的 URL 地址
window.alert("Hello, BOM");
// 系统对话框（警告框）2. Global 作用域
在全局作用域中，var 声明的变量会自动挂载到 window 对象；
而 let 和 const 不会。
ini
var a = 10;
let b = 20;
console.log(window.a); // 10
console.log(window.b); // undefined3. 窗口关系
window.self：始终指向当前窗口。window.top：指向最顶层窗口（即使嵌套在 iframe 中）。window.parent：指向当前窗口的父级窗口。
javascript
if (window.top !== window.self) {
console.log("当前页面在 iframe 中");
}4. 窗口位置与像素比
-
devicePixelRatio表示 物理像素 / CSS 像素 的比率。- 普通屏幕：1
- Retina 屏幕：2 或 3
javascript
console.log(window.devicePixelRatio);
// 例如 2，表示 1 个 CSS 像素 = 2 个物理像素是否能设置？
不能直接修改 devicePixelRatio，但可以通过 <meta> 标签影响缩放：
ini
<meta name="viewport" content="width=device-width, initial-scale=1.0">5. 窗口大小与位置
常见属性：
innerWidth/innerHeight：可视区域大小。outerWidth/outerHeight：包括浏览器工具栏的窗口总大小。screenX/screenY：窗口左上角相对于屏幕的坐标。
设置窗口大小（仅对新窗口有效）：
ini
let win = window.open("about:blank", "test", "width=400,height=300");
win.resizeTo(600, 400); // 调整窗口大小
win.moveTo(100, 100); // 移动到屏幕坐标 (100, 100)6. 导航与打开新窗口
(1) 弹出窗口
javascript
let popup = window.open(
"https://example.com",
"myWin",
"width=500,height=400,resizable=yes"
);(2) 安全限制
现代浏览器禁止非用户交互时的 window.open。
必须由 用户点击事件 触发：
dart
document.querySelector("#btn").onclick = () => {
window.open("https://openai.com");
};(3) 弹窗拦截
- Chrome/Firefox 内置 弹窗屏蔽，自动弹出的窗口会被阻止。
7. 定时器
setTimeout(fn, ms)：延时执行一次。setInterval(fn, ms)：循环执行。clearTimeout(id)/clearInterval(id)：取消定时器。
javascript
let t1 = setTimeout(() => console.log("延时一次"), 1000);
let t2 = setInterval(() => console.log("循环执行"), 2000);
clearTimeout(t1);
clearInterval(t2);8. 系统对话窗
alert(msg)：提示框。confirm(msg)：确认框，返回true/false。prompt(msg, default)：输入框，返回用户输入或null。print()：打开打印对话框。find()：查找对话框（部分浏览器支持）。
erlang
alert("这是提示框");
if (confirm("确定吗？")) {
let name = prompt("请输入名字：", "默认值");
console.log("输入内容:", name);
}
window.print(); // 打印当前页面9. location 对象
location 表示当前页面的 URL 信息。
常见属性：
arduino
console.log(location.href); // 完整 URL
console.log(location.protocol); // 协议，如 https:
console.log(location.hostname); // 主机名
console.log(location.pathname); // 路径部分
console.log(location.search); // 查询字符串，如 ?id=123
console.log(location.hash); // 锚点部分，如 #top(1) 查询字符串
csharp
let params = new URLSearchParams(location.search);
console.log(params.get("id")); // 获取 ?id=123 中的 12310. 操作地址
assign()
跳转到新地址，保留历史记录。
arduino
location.assign("https://example.com");replace()
跳转到新地址，不保留当前页面历史记录（无法后退）。
vbscript
location.replace("https://example.com");reload()
刷新页面：
ruby
location.reload(); // 普通刷新（可能使用缓存）
location.reload(true); // 强制刷新（部分浏览器废弃 true 参数）11. navigator 对象
提供浏览器和系统信息：
arduino
console.log(navigator.userAgent); // 浏览器 UA
console.log(navigator.language); // 用户语言
console.log(navigator.onLine); // 是否联网
console.log(navigator.platform); // 操作系统平台12. 检测插件
javascript
for (let plugin of navigator.plugins) {
console.log(plugin.name, plugin.filename, plugin.description);
}13. 注册协议处理程序
ruby
navigator.registerProtocolHandler(
"web+chat",
"https://example.com/?msg=%s",
"My Chat App"
);
// 当用户访问 web+chat://hello 时，会跳转到
// https://example.com/?msg=hello14. screen 对象
提供屏幕信息：
arduino
console.log(screen.width, screen.height); // 屏幕分辨率
console.log(screen.availWidth, screen.availHeight); // 可用分辨率
console.log(screen.colorDepth); // 每像素颜色位数15. history 对象
(1) 导航
scss
history.back(); // 相当于点击后退
history.forward(); // 相当于点击前进
history.go(-1); // 后退 1 步
history.go(2); // 前进 2 步16. 历史状态管理
HTML5 提供了 pushState() 和 replaceState() 用于 单页应用（SPA）的历史管理。
javascript
history.pushState({page: 1}, "标题1", "?page=1");
// 添加一条历史记录（不会刷新页面）
history.replaceState({page: 2}, "标题2", "?page=2");
// 替换当前历史记录（不会新增）
window.onpopstate = (event) => {
console.log("用户点击返回/前进:", event.state);
};