进阶-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方法显示对话框与用户进行交互。

// 获取窗口大小
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对象包含有关浏览器的信息，如浏览器名称、版本、用户代理字符串等。

// 获取浏览器名称
let browserName = navigator.appName;

// 获取浏览器版本
let browserVersion = navigator.appVersion;

// 获取用户代理字符串
let userAgent = navigator.userAgent;

　　

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

// 获取屏幕的宽度
let screenWidth = screen.width;

// 获取屏幕的高度
let screenHeight = screen.height;

// 获取屏幕的像素密度
let pixelDensity = screen.pixelDepth;

　　

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

// 获取当前页面的URL
let currentURL = location.href;

// 导航到新的URL
location.href = "https://www.example.com";

// 重新加载页面
location.reload();

　　

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

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

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

// 后退或前进指定数量的页面
history.go(-2);