BOM

BOM 是浏览器对象模型（Browser Object Model）的缩写，它提供了与浏览器窗口进行交互的对象。BOM 的核心是 window 对象，它代表浏览器窗口，同时也是 JavaScript 中的全局对象。

window 对象

window 对象是 BOM 的核心，它代表整个浏览器窗口，包括标题栏、菜单栏、工具栏、地址栏和内容区域等所有部分。在浏览器中，所有的全局变量和函数都是 window 对象的属性。

常用属性

window.innerHeight：浏览器窗口的内部高度
window.innerWidth：浏览器窗口的内部宽度
window.outerHeight：浏览器窗口的外部高度
window.outerWidth：浏览器窗口的外部宽度
window.screenX：浏览器窗口左上角顶点相对于屏幕左上角的 X 坐标
window.screenY：浏览器窗口左上角顶点相对于屏幕左上角的 Y 坐标

常用方法

window.alert()：显示警告框
window.confirm()：显示确认框
window.prompt()：显示输入框
window.open()：打开新窗口
window.close()：关闭当前窗口
window.scrollTo()：滚动到指定位置
window.scrollBy()：相对当前位置滚动

location 对象

location 对象对应浏览器的地址栏，包含了当前 URL 的信息。通过修改 location 对象的属性，可以实现页面的跳转和刷新。

常用属性

假设当前页面 URL 为：https://www.example.com:8080/path/to/page?name=evan&age=25#section1

location.href：完整的 URL，值为 "https://www.example.com:8080/path/to/page?name=evan&age=25#section1"
location.protocol：协议（如 http: 或 https:），值为 "https:"
location.host：主机名和端口，值为 "www.example.com:8080"
location.hostname：主机名，值为 "www.example.com"
location.port：端口号，值为 "8080"
location.pathname：路径部分，值为 "/path/to/page"
location.search：查询字符串部分（包含问号），值为 "?name=evan&age=25"
location.hash：锚点部分（包含井号），值为 "#section1"

常用方法

location.reload()：重新加载当前页面
location.assign()：加载新页面
location.replace()：用新页面替换当前页面

history 对象

history 对象对应浏览器的前进/后退功能，包含了用户访问过的页面历史记录。可以通过浏览器的前进/后退按钮或快捷键（如 Alt + ←/→）来触发这些功能。

常用方法

history.back()：后退一步
history.forward()：前进一步
history.go()：跳转到指定页面
history.pushState()：添加新的历史记录
history.replaceState()：替换当前历史记录

navigator 对象

navigator 对象包含了浏览器本身的信息，这些信息通常可以在浏览器的"关于"页面中看到，比如浏览器版本、名称、运行平台等。

常用属性

navigator.userAgent：浏览器的 User-Agent 字符串
navigator.platform：运行浏览器的操作系统平台
navigator.language：浏览器的主语言
navigator.cookieEnabled：是否启用 cookie

screen 对象

screen 对象对应用户的显示器屏幕，包含了屏幕的分辨率、颜色深度等硬件层面的信息。这些信息与浏览器窗口大小无关，而是反映整个显示器的特性。

常用属性

screen.width：屏幕宽度
screen.height：屏幕高度
screen.colorDepth：颜色深度
screen.pixelDepth：像素深度

使用示例

// 获取窗口大小
console.log(`窗口宽度：${window.innerWidth}`);
console.log(`窗口高度：${window.innerHeight}`);

// 获取当前 URL
console.log(`当前 URL：${location.href}`);

// 页面跳转
location.href = "https://www.example.com";

// 历史记录操作
history.back(); // 后退
history.forward(); // 前进

// 获取浏览器信息
console.log(`浏览器：${navigator.userAgent}`);
console.log(`平台：${navigator.platform}`);

// 获取屏幕信息
console.log(`屏幕宽度：${screen.width}`);
console.log(`屏幕高度：${screen.height}`);

注意事项

BOM 没有统一的标准，不同浏览器可能会有差异
某些 BOM 方法可能会被浏览器的安全策略阻止
在使用 window.open() 等方法时要注意跨域限制
建议使用现代的 Web API 替代一些过时的 BOM 方法