JavaScript 浏览器对象模型 BOM
浏览器对象模型（Browser Object Model，BOM）是指一组与浏览器进行交互的 JavaScript 对象。它允许 JavaScript 与浏览器的组件进行交互，比如窗口、文档、历史记录等。BOM 不同于 DOM（文档对象模型），后者专注于处理 HTML 和 XML 文档的结构和内容。下面是五个主要对象：
- window 对象：表示浏览器的一个窗口，是 JavaScript 在浏览器环境中的全局对象。这意味着在全局作用域中定义的变量和函数实际上都是 window 对象的属性和方法。
- location 对象：用于获取或改变当前文档的 URL，允许页面重定向；
- navigator 对象：提供了关于浏览器的一些信息，包括用户代理信息、浏览器版本、用户的语言设置等。
- screen 对象：提供了有关用户屏幕的信息，比如屏幕宽度、高度；
- history 对象：用于访问浏览器的历史记录，可以用于前进、后退操作
window 对象
window 对象是 BOM 的核心，表示浏览器窗口或标签页。window 对象提供了一系列属性和方法：
window 对象属性
document：对 Document 对象的只读引用，用于访问页面的内容。history：对 History 对象的只读引用，用于管理浏览历史。innerHeight：返回窗口的文档显示区的高度（以像素为单位）。innerWidth：返回窗口的文档显示区的宽度（以像素为单位）。location：用于获取或设置窗口的 URL。name：设置或返回窗口的名称。outerHeight：设置或返回窗口的外部高度（包括工具栏和滚动条等界面元素）。outerWidth：设置或返回窗口的外部宽度（包括工具栏和滚动条等界面元素）。screenX：返回窗口在屏幕上的水平坐标。screenY：返回窗口在屏幕上的垂直坐标。navigator：包含大量有关 Web 浏览器的信息，用于检测浏览器及操作系统。
window 方法
alert(message)：显示一个带有指定消息和一个确定按钮的对话框。confirm(message)：显示一个带有指定消息以及确定和取消按钮的对话框，并返回一个布尔值。prompt(message, defaultValue)：显示一个带有指定消息、一个文本输入字段以及确定和取消按钮的对话框，并返回用户输入的文本（如果用户点击取消按钮，则返回 null）。open(url, windowName[, windowFeatures])：打开一个新的浏览器窗口或标签页，并返回一个新的 Window 对象。close()：关闭当前窗口。setTimeout(function, delay)：在指定的延迟（以毫秒为单位）后调用一个函数或计算一个表达式。setInterval(function, delay)：按照指定的周期（以毫秒为单位）调用一个函数或计算一个表达式。
location 对象
Location 对象是浏览器的一个重要组成部分，它提供了关于当前文档的 URL 的信息并允许你进行 URL 的操作。
Location 对象属性
例子：https://www.csdn.net:8080/cdn/about.html?name=simahe#goods，属性可以取值，也可以设置值。
| 属性名 | 例子 | 描述 |
|---|---|---|
| href | https://www.csdn.net:8080/cdn/about.html?name=simahe#goods | 完整的 URL |
| protocol | https | 页面使用的协议。 http 或 https |
| host | www.csdn.net:8080 | 域名+端口号（如果有） |
| hostname | www.csdn.net | 不带端口的域名 |
| port | 8080 | 端口号，没有返回空字符串 |
| pathname | cdn | URL 的目录或文件名 |
| search | ?name=simahe | URL 查询字符串，“?”开头 |
| hash | #goods | 返回 URL 中的 hash，没有返回空字符串 |
Location 对象的方法
assign(url)：加载新的文档,window.location.assign("csdn.com");replace(url)：替换当前文档，window.location.replace("csdn.com");reload()：重新加载当前文档,window.location.reload();
navigator 对象
navigator 对象提供了有关浏览器的信息。
navigator 对象属性
navigator.userAgent：可以用来检查浏览器类型，手机号类型。navigator.language：获取浏览器语言，然后设置网站的语言，提升用户体验。navigator.onLine：检查用户当前是否处于联网状态。navigator.geolocation：获取地理位置信息
function getMobileModel() {var userAgent = navigator.userAgent || navigator.vendor || window.opera;var mobileModel = "未知手机型号";if (/iPhone/i.test(userAgent)) {} else if (/Android/i.test(userAgent)) {mobileModel = "Android设备";}return mobileModel;
}console.log(getMobileModel());
screen 对象
Screen 对象是浏览器的一个组成部分，用于提供有关用户屏幕的详细信息，如屏幕尺寸、颜色深度、分辨率等。这些信息可以帮助开发者获取有关用户环境的上下文，以优化布局和响应式设计。
screen 对象属性
screen.width：返回屏幕的宽度（单位：像素），包括任务栏或浏览器边框等。screen.height：返回屏幕的高度（单位：像素），包括任务栏或浏览器边框等。screen.availWidth：返回屏幕可用宽度，即除去任务栏或浏览器边框等后的宽度（单位：像素）。这个属性对于确定网页内容的最佳布局宽度非常有用。screen.availHeight：返回屏幕可用高度，即除去任务栏或浏览器边框等后的高度（单位：像素）。这个属性可以帮助开发者确保网页内容在用户的屏幕上可见。screen.colorDepth：返回显示屏幕的颜色分辨率（像素：比特）。这个属性可以帮助开发者了解用户设备的颜色显示能力，从而选择适当的图像和颜色方案。screen.pixelDepth：返回目标设备或缓冲器上的调色板的比特深度，通常与 screen.colorDepth 相同。screen.deviceXDPI和screen.deviceYDPI：分别返回显示屏幕的每英寸水平点数和每英寸垂直点数。这些属性对于了解用户设备的屏幕密度和物理尺寸非常有用。
screen 使用场景
- 响应式设计
- 设备适配和用户体验优化
// 使用 Screen 对象实现响应式设计
function adjustLayout() {if (screen.availWidth < 768) {document.body.style.backgroundColor = "lightblue";} else {document.body.style.backgroundColor = "white";}
}// 监听页面加载和窗口大小变化
window.onload = adjustLayout;
window.onresize = adjustLayout;if (screen.colorDepth > 24) {// 使用更高质量的图像
} else {// 使用低质量或优化过的图像
}
history 对象
history 对象保存着用户上网的历史记录，从窗口打开的那一刻算起。处于安全考虑,开发人员无法得知用户浏览过的 URL。
history 对象属性
history.length：返返回历史记录中条目的数量，包括当前页面。即用户访问的总页面数。history.scrollRestoration：滚动恢复属性允许 web 应用程序在历史导航上显式地设置默认滚动恢复行为history.state：返回当前页面的 state 对象。这个属性在 HTML5 中引入，用于存储与当前历史记录条目相关联的状态对象。
history 主要方法
back()：会在会话历史记录中向后移动一页。如果没有上一页，则此方法调用不执行任何操作。forward()：会话历史中向前移动一页。go(delta)：从会话历史记录中加载特定页面。你可以使用它在历史记录中前后移动，具体取决于 delta 参数的值。pushState()：向浏览器的会话历史栈增加了一个条目。replaceState()：用于更新会话历史栈条目。与 pushState()类似，但它不会新建一个，而是替换当前的。
history 使用场景
- 导航控制
- 状态管理
- 单页应用（SPA）：Vue-router 的 history 模式
history.go(-1) //-1,1,2
history.back()
history.forward()
if(history.length==0){//用户打开的第一个页面
}history.pushState({ key: 'value' }, '', '/new-url');
总结
BOM 提供了与浏览器交互的基础设施，允许开发者获取当前窗口、文档、历史、导航和屏幕的信息及功能。这些功能使得我们能够创建丰富的用户体验和交互。