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.youkuaiyun.com:8080/cdn/about.html?name=simahe#goods，属性可以取值，也可以设置值。

属性名	例子	描述
href	https://www.youkuaiyun.com:8080/cdn/about.html?name=simahe#goods	完整的 URL
protocol	https	页面使用的协议。 http 或 https
host	www.youkuaiyun.com:8080	域名+端口号（如果有）
hostname	www.youkuaiyun.com	不带端口的域名
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 提供了与浏览器交互的基础设施，允许开发者获取当前窗口、文档、历史、导航和屏幕的信息及功能。这些功能使得我们能够创建丰富的用户体验和交互。