【前端基础篇】JavaScript之BOM介绍

文章目录

浏览器对象模型（BOM）介绍
- [1. 什么是BOM？](#1. 什么是BOM？)
- [2. Window 对象](#2. Window 对象)
- - [2.1 弹出框](#2.1 弹出框)
  - - [2.1.1 警告框](#2.1.1 警告框)
    - [2.1.2 确认框](#2.1.2 确认框)
    - [2.1.3 提示框](#2.1.3 提示框)
  - [2.2 定时事件](#2.2 定时事件)
  - - [2.2.1 延时器](#2.2.1 延时器)
    - [2.2.2 定时器](#2.2.2 定时器)
  - [2.3 Window 对象其他常用属性与方法](#2.3 Window 对象其他常用属性与方法)
  - - [2.3.1 获取窗口尺寸](#2.3.1 获取窗口尺寸)
    - [2.3.2 打开新窗口与关闭窗口](#2.3.2 打开新窗口与关闭窗口)
    - [2.3.3 移动与调整窗口大小](#2.3.3 移动与调整窗口大小)
- [3. Navigator 对象](#3. Navigator 对象)
- - [3.1 判断浏览器类型](#3.1 判断浏览器类型)
  - [3.2 navigator对象及方法](#3.2 navigator对象及方法)
  - - 详细解释：
- [4. Location 对象](#4. Location 对象)
- - [4.1 常用属性](#4.1 常用属性)
  - [4.2 页面跳转与刷新](#4.2 页面跳转与刷新)
  - [4.3 URL 替换](#4.3 URL 替换)
  - [4.4 Location常用对象和方法](#4.4 Location常用对象和方法)
  - - 详细解释：
- [5. History 对象](#5. History 对象)
- - [5.1 前进与后退](#5.1 前进与后退)
  - [5.2 获取历史记录长度](#5.2 获取历史记录长度)
  - [5.3 history对象常用属性方法](#5.3 history对象常用属性方法)
  - - 详细解释：
- [6. Screen 对象](#6. Screen 对象)
- - [6.1 获取屏幕尺寸](#6.1 获取屏幕尺寸)
- [7. 综合应用案例](#7. 综合应用案例)
- - [7.1 延时操作与窗口管理](#7.1 延时操作与窗口管理)
- 结论

浏览器对象模型（BOM）介绍

浏览器对象模型（BOM）为JavaScript提供了与浏览器对话的能力。

尽管BOM没有正式的标准，但现代浏览器已经实现了相同的JavaScript交互方法和属性。

BOM提供了一组对象，用于操作浏览器窗口、导航历史记录、获取浏览器和屏幕信息等。

1. 什么是BOM？

BOM使JavaScript能够与浏览器进行交互，而不仅仅是操作网页内容。它包括多个对象，最常用的有：

Window：代表整个浏览器窗口，也是JavaScript全局对象的代名词。
Navigator：提供有关浏览器的信息，如用户代理、浏览器版本等。
Location：包含当前URL信息，并可用于页面跳转等操作。
History：用于操作浏览器的会话历史记录，例如前进、后退。
Screen：提供有关用户屏幕的详细信息。

这些对象在window对象中作为其属性存在，因此可以通过window对象来访问它们，也可以直接使用它们的名称。

2. Window 对象

window对象是BOM中最核心的对象，代表浏览器窗口。它是全局对象，所有全局变量、函数、对象都自动成为window对象的属性和方法。

2.1 弹出框

方法/属性	描述	示例代码
`window.alert()`	显示一个警告对话框。	`window.alert("这是一个警告对话框！");`
`window.confirm()`	显示一个带有消息和两个按钮的确认对话框。	`if (window.confirm("你确定要继续吗？")) { console.log("用户点击了确定"); } else { console.log("用户点击了取消"); }`
`window.prompt()`	显示一个带有消息的提示对话框，提示用户输入信息。	`var name = window.prompt("请输入你的名字：", "张三"); console.log("用户输入的名字是：" + name);`

2.1.1 警告框

警告框（Alert）用于向用户传达信息，用户需单击"确定"以继续操作。

javascript 复制代码

window.alert("这是一个警告框！");

2.1.2 确认框

确认框（Confirm）用于让用户验证或接受某些信息。用户单击"确定"或"取消"后，将返回true或false。

javascript 复制代码

var result = window.confirm("请按按钮");
if (result) {
    console.log("您按了确认！");
} else {
    console.log("您按了取消！");
}

2.1.3 提示框

提示框（Prompt）用于在用户进入页面前输入值。返回值是用户输入的字符串或null。

javascript 复制代码

var name = window.prompt("请输入您的姓名", "张三");
if (name !== null) {
    console.log("您好，" + name + "！");
}

2.2 定时事件

2.2.1 延时器

setTimeout() 方法在指定的时间延迟后执行一次指定的函数。

javascript 复制代码

window.setTimeout(function () {
    console.log("Hello, after 3 seconds!");
}, 3000);

2.2.2 定时器

setInterval() 方法按指定的时间间隔重复执行指定的函数。

javascript 复制代码

window.setInterval(function () {
    console.log("Hello, every second!");
}, 1000);

2.3 Window 对象其他常用属性与方法

属性/方法	描述	示例代码
`window.alert()`	显示一个警告框，用户点击"确定"后关闭。	`window.alert("这是一个警告框！");`
`window.confirm()`	显示一个确认框，用户点击"确定"返回true，点击"取消"返回false。	`window.confirm("您确认吗？");`
`window.prompt()`	显示一个提示框，要求用户输入信息，返回输入值或null。	`window.prompt("请输入您的名字：");`
`window.setTimeout()`	在指定的时间后执行一个函数，仅执行一次。	`window.setTimeout(function() {}, 1000);`
`window.setInterval()`	每隔指定的时间间隔重复执行一个函数。	`window.setInterval(function() {}, 1000);`
`window.innerHeight`	返回浏览器窗口的内部高度（以像素为单位）。	`console.log(window.innerHeight);`
`window.innerWidth`	返回浏览器窗口的内部宽度（以像素为单位）。	`console.log(window.innerWidth);`

2.3.1 获取窗口尺寸

可以使用以下属性来确定浏览器窗口的尺寸（以像素为单位）。

javascript 复制代码

var width = window.innerWidth;
var height = window.innerHeight;
console.log("窗口宽度：" + width + "，高度：" + height);

2.3.2 打开新窗口与关闭窗口

window.open() 用于打开一个新窗口，而window.close() 用于关闭当前窗口。

javascript 复制代码

var myWindow = window.open("https://www.example.com", "_blank", "width=500,height=500");
// 关闭窗口
myWindow.close();

2.3.3 移动与调整窗口大小

使用window.moveTo() 和window.resizeTo() 可以移动或调整当前窗口的大小。

javascript 复制代码

myWindow.moveTo(300, 200);
myWindow.resizeTo(800, 600);

3. Navigator 对象

navigator对象提供关于浏览器的详细信息，例如浏览器类型、版本、操作系统等。最常用的属性是navigator.userAgent，它包含了浏览器的用户代理字符串。

属性/方法	描述	示例代码
`navigator.userAgent`	返回浏览器的用户代理字符串。	`console.log("用户代理是：" + navigator.userAgent);`
`navigator.language`	返回浏览器的语言。	`console.log("浏览器语言是：" + navigator.language);`

3.1 判断浏览器类型

通过分析navigator.userAgent字符串，可以识别用户使用的浏览器类型。

javascript 复制代码

var ua = navigator.userAgent;
if (/firefox/i.test(ua)) {
    console.log("您正在使用火狐浏览器");
} else if (/chrome/i.test(ua)) {
    console.log("您正在使用谷歌浏览器");
} else if (/msie/i.test(ua) || "ActiveXObject" in window) {
    console.log("您正在使用IE浏览器");
} else {
    console.log("您使用的浏览器未能识别");
}

3.2 navigator对象及方法

属性/方法	描述	示例代码
`navigator.userAgent`	返回包含浏览器用户代理字符串的信息，该字符串可以用于识别浏览器类型。	`console.log(navigator.userAgent);`
`navigator.language`	返回浏览器的语言设置，通常为语言代码，如 `"en-US"`。	`console.log(navigator.language);`
`navigator.platform`	返回运行浏览器的操作系统平台的信息，如 `"Win32"` 或 `"MacIntel"`。	`console.log(navigator.platform);`
`navigator.onLine`	返回一个布尔值，表示浏览器是否在线。	`console.log(navigator.onLine);`
`navigator.cookieEnabled`	返回一个布尔值，表示浏览器是否启用了cookie。	`console.log(navigator.cookieEnabled);`
`navigator.javaEnabled()`	返回一个布尔值，表示浏览器是否启用了Java。	`console.log(navigator.javaEnabled());`
`navigator.geolocation`	提供访问设备地理位置信息的方法和属性。	`navigator.geolocation.getCurrentPosition(success, error);`

详细解释：

navigator.userAgent: 用于识别用户浏览器的详细信息，这对于特定浏览器的兼容性处理非常有用。
navigator.language: 返回用户设置的语言，这对于多语言支持的应用程序非常有用。
navigator.platform: 提供有关操作系统的信息，通常用于判断应用在不同平台上的行为差异。
navigator.onLine: 通过检查网络连接状态，可以实现基于网络状态的应用程序逻辑，比如在离线状态下禁用某些功能。
navigator.cookieEnabled: 检查浏览器是否支持和启用了Cookie，很多用户体验相关的操作依赖于Cookie的使用。
navigator.javaEnabled(): 虽然Java Applets已经很少使用，但这个方法仍可以用来检查浏览器是否启用了Java。
navigator.geolocation: 通过Geolocation API获取用户的地理位置信息，用于基于位置的服务和应用。

4. Location 对象

location对象包含当前URL的信息，并允许你操作浏览器跳转页面、重新加载页面等。

4.1 常用属性

javascript 复制代码

console.log(location.href);     // 完整URL
console.log(location.protocol); // 协议（如http或https）
console.log(location.host);     // 主机（包括端口号）
console.log(location.pathname); // 路径
console.log(location.search);   // 查询字符串

4.2 页面跳转与刷新

使用location.assign()或直接设置location.href可以跳转到一个新页面，而使用location.reload()可以刷新当前页面。

javascript 复制代码

location.href = "https://www.example.com";  // 跳转
location.reload();  // 刷新

4.3 URL 替换

使用location.replace()可以替换当前页面，并不会在历史记录中保留之前的页面。

javascript 复制代码

location.replace("https://www.example.com");

4.4 Location常用对象和方法

属性/方法	描述	示例代码
`location.href`	返回当前页面的完整URL，或设置新URL并跳转。	`console.log(location.href);`
`location.protocol`	返回当前页面使用的协议（如http:或https:）。	`console.log(location.protocol);`
`location.host`	返回主机名和端口号。	`console.log(location.host);`
`location.pathname`	返回URL路径部分。	`console.log(location.pathname);`
`location.search`	返回URL中?之后的查询字符串。	`console.log(location.search);`
`location.hash`	返回URL中#号后面的部分（锚点）。	`console.log(location.hash);`
`location.assign()`	加载指定的URL。	`location.assign("https://www.example.com");`
`location.reload()`	重新加载当前页面。	`location.reload();`
`location.replace()`	替换当前页面，不会生成历史记录。	`location.replace("https://www.example.com");`

详细解释：

location.href : 用于获取或设置当前页面的完整URL。通过修改href，可以实现页面跳转。
location.protocol : 获取当前页面使用的协议，如http:或https:，这对于在不同协议下执行特定操作非常有用。
location.host : 获取当前页面的主机名和端口号，例如www.example.com:80。
location.pathname: 返回URL的路径部分，不包含主机名和查询字符串。
location.search : 获取URL中?后面的查询字符串，通常用于获取查询参数。
location.hash : 获取URL中的锚点部分，即#后面的字符串，常用于页面内导航。
location.assign() : 加载一个新的URL，与直接设置location.href类似，但不会刷新页面。
location.reload() : 重新加载当前页面，类似于用户点击浏览器的刷新按钮。可以通过传递true强制从服务器重新加载。
location.replace(): 用一个新的URL替换当前页面，不会在浏览器的历史记录中生成条目。

5. History 对象

history对象用于操作浏览器的会话历史记录。你可以使用它来控制浏览器的前进、后退操作。

5.1 前进与后退

javascript 复制代码

history.back();   // 后退到上一个页面
history.forward(); // 前进到下一个页面

5.2 获取历史记录长度

history.length属性可以返回当前会话的历史记录长度。

javascript 复制代码

console.log("历史记录条目数：" + history.length);

5.3 history对象常用属性方法

属性/方法	描述	示例代码
`history.length`	返回浏览器历史记录的长度，即用户在当前会话中访问的URL数。	`console.log(history.length);`
`history.back()`	加载历史记录中的前一个URL，与浏览器的"后退"按钮功能相同。	`history.back();`
`history.forward()`	加载历史记录中的下一个URL，与浏览器的"前进"按钮功能相同。	`history.forward();`
`history.go(n)`	加载历史记录中的特定页面。`n`为相对位置，负数表示后退，正数表示前进。	`history.go(-1); // 后退1页`
`history.pushState()`	将URL添加到历史记录中，但不会重新加载页面。	`history.pushState({page: 1}, "title", "?page=1");`
`history.replaceState()`	修改当前历史记录条目的URL，但不会重新加载页面。	`history.replaceState({page: 2}, "title", "?page=2");`

详细解释：

history.length: 返回当前会话中的历史记录条目数，包括当前页面。这对于判断是否可以后退或前进很有用。
history.back(): 作用等同于点击浏览器的"后退"按钮，用户会返回到前一个页面。
history.forward(): 作用等同于点击浏览器的"前进"按钮，用户会前往下一个页面。
history.go(n) : 通过相对位置跳转到历史记录中的某个页面。n为负数表示向后跳转，为正数表示向前跳转。
history.pushState(): 添加一个新的历史记录条目，常用于单页应用程序（SPA）中更新URL而不刷新页面。
history.replaceState() : 替换当前的历史记录条目，类似于pushState()，但不会创建新的记录条目。

6. Screen 对象

screen对象提供用户屏幕的相关信息，如屏幕的宽度、高度、可用宽度和可用高度等。

属性	描述	示例代码
`screen.width`	返回屏幕的宽度。	`console.log("屏幕宽度：" + screen.width);`
`screen.height`	返回屏幕的高度。	`console.log("屏幕高度：" + screen.height);`
`screen.availWidth`	返回屏幕的可用宽度（排除任务栏）。	`console.log("可用屏幕宽度：" + screen.availWidth);`
`screen.availHeight`	返回屏幕的可用高度（排除任务栏）。	`console.log("可用屏幕高度：" + screen.availHeight);`

6.1 获取屏幕尺寸

javascript 复制代码

console.log("屏幕宽度：" + screen.width);
console.log("屏幕高度：" + screen.height);
console.log("可用屏幕宽度：" + screen.availWidth);
console.log("可用屏幕高度：" + screen.availHeight);

7. 综合应用案例

7.1 延时操作与窗口管理

下面是一个综合示例，展示了如何使用BOM对象来创建一个自动打开、移动并关闭的窗口。

javascript 复制代码

// 打开新窗口
var newWindow = window.open("https://www.example.com", "_blank", "width=200,height=200");

// 2秒后将窗口移动到屏幕的右下角
setTimeout(function() {
    newWindow.moveTo(screen.availWidth - 200, screen.availHeight - 200);
}, 2000);

// 5秒后调整窗口大小
setTimeout(function() {
    newWindow.resizeTo(500, 500);
}, 5000);

// 10秒后关闭窗口
setTimeout(function() {
    newWindow.close();
}, 10000);

结论

通过对浏览器对象模型（BOM）的深入理解和应用，开发者可以有效地与浏览器进行交互，实现更加复杂和动态的网页应用程序。无论是通过控制窗口对象、获取浏览器信息，还是操作浏览器历史记录，BOM为JavaScript提供了丰富的功能，使得网页开发更为灵活和强大。

以上就是关于【前端基础篇】JavaScript之BOM介绍的内容啦，各位大佬有什么问题欢迎在评论区指正，您的支持是我创作的最大动力！❤️