进阶-BOM

BOM（浏览器对象模型Browser Object Model ）是JavaScript提供的用于与浏览器进行交互的对象集合。BOM提供了访问和操作浏览器窗口和页面的方法，包括浏览器的历史记录、位置信息、计时器、对话框等。以下是对BOM的详细介绍：

1. window对象： window对象表示浏览器的窗口或标签页。它是BOM的顶级对象，包含了许多方法和属性。

• 窗口大小： 可以使用window.innerWidth和window.innerHeight获取浏览器窗口的内部宽度和高度。
• 打开和关闭窗口： 可以使用window.open方法打开一个新窗口，并使用window.close方法关闭当前窗口。
• 导航和历史记录： 可以使用window.location对象进行页面导航，通过window.history对象访问浏览器的历史记录。
• 计时器： 可以使用window.setTimeout和window.setInterval方法创建定时器，执行延迟或重复的操作。
• 对话框： 可以使用window.alert、window.prompt和window.confirm方法显示对话框与用户进行交互。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

// 获取窗口大小 let width = window.innerWidth; let height = window.innerHeight;   // 打开一个新窗口 let newWindow = window.open("https://www.example.com", "_blank");   // 关闭当前窗口 window.close();   // 导航到新的URL window.location.href = "https://www.example.com";   // 延迟执行代码 window.setTimeout(function() {   console.log("延迟执行"); }, 2000);   // 显示对话框 window.alert("这是一个警告对话框");

　　

2. navigator对象： navigator对象包含有关浏览器的信息，如浏览器名称、版本、用户代理字符串等。

?

1 2 3 4 5 6 7 8

// 获取浏览器名称 let browserName = navigator.appName;   // 获取浏览器版本 let browserVersion = navigator.appVersion;   // 获取用户代理字符串 let userAgent = navigator.userAgent;

　　

3. screen对象： screen对象提供有关用户屏幕的信息，如屏幕的宽度、高度、像素密度等。

?

1 2 3 4 5 6 7 8

// 获取屏幕的宽度 let screenWidth = screen.width;   // 获取屏幕的高度 let screenHeight = screen.height;   // 获取屏幕的像素密度 let pixelDensity = screen.pixelDepth;

　　

4. location对象： location对象用于获取和操作当前页面的URL信息。

?

1 2 3 4 5 6 7 8

// 获取当前页面的URL let currentURL = location.href;   // 导航到新的URL location.href = "https://www.example.com";   // 重新加载页面 location.reload();

　　

5. history对象： history对象用于访问浏览器的历史记录。

?

1 2 3 4 5 6 7 8

// 后退到上一个页面 history.back();   // 前进到下一个页面 history.forward();   // 后退或前进指定数量的页面 history.go(-2);