文章目录

前言浏览器对象模型（BOM）介绍1. 什么是BOM？2. Window 对象2.1 弹出框2.1.1 警告框2.1.2 确认框2.1.3 提示框

2.2 定时事件2.2.1 延时器2.2.2 定时器

2.3 Window 对象其他常用属性与方法2.3.1 获取窗口尺寸2.3.2 打开新窗口与关闭窗口2.3.3 移动与调整窗口大小

3. Navigator 对象3.1 判断浏览器类型3.2 navigator对象及方法详细解释：

4. Location 对象4.1 常用属性4.2 页面跳转与刷新4.3 URL 替换4.4 Location常用对象和方法详细解释：

5. History 对象5.1 前进与后退5.2 获取历史记录长度5.3 history对象常用属性方法详细解释：

6. Screen 对象6.1 获取屏幕尺寸

7. 综合应用案例7.1 延时操作与窗口管理

结论

前言

在阅读过程中可以把代码片复制到vscode上去浏览器看实际效果，更易理解喔😘

浏览器对象模型（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）用于向用户传达信息，用户需单击“确定”以继续操作。

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

2.1.2 确认框

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

var result = window.confirm("请按按钮");

if (result) {

console.log("您按了确认！");

} else {

console.log("您按了取消！");

}

2.1.3 提示框

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

var name = window.prompt("请输入您的姓名", "张三");

if (name !== null) {

console.log("您好，" + name + "！");

}

2.2 定时事件

2.2.1 延时器

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

window.setTimeout(function () {

console.log("Hello, after 3 seconds!");

}, 3000);

2.2.2 定时器

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

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 获取窗口尺寸

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

var width = window.innerWidth;

var height = window.innerHeight;

console.log("窗口宽度：" + width + "，高度：" + height);

2.3.2 打开新窗口与关闭窗口

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

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

// 关闭窗口

myWindow.close();

2.3.3 移动与调整窗口大小

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

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字符串，可以识别用户使用的浏览器类型。

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 常用属性

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()可以刷新当前页面。

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

location.reload(); // 刷新

4.3 URL 替换

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

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 前进与后退

history.back(); // 后退到上一个页面

history.forward(); // 前进到下一个页面

5.2 获取历史记录长度

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

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 获取屏幕尺寸

console.log("屏幕宽度：" + screen.width);

console.log("屏幕高度：" + screen.height);

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

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

---

7. 综合应用案例

7.1 延时操作与窗口管理

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

// 打开新窗口

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介绍的内容啦，各位大佬有什么问题欢迎在评论区指正，您的支持是我创作的最大动力！❤️