JavaScript BOM 操作

BOM 提供了浏览器特定的对象和方法，用于访问和操作浏览器的功能和信息。它扩展了 DOM 的功能，使得 JavaScript 可以与浏览器本身进行交互，例如控制页面导航、弹出对话框、获取设备信息等。

1. window 对象

window 是 BOM 的顶级对象，代表了浏览器窗口或框架。所有全局对象、方法和属性都属于 window 对象，可以直接使用。

1.1 基本属性和方法

一些常用的 window 方法包括：

alert("Hello!");             // 显示警告框
window.alert("Hello!");      // 等价于上面

其他方法包括：

• window.confirm("Are you sure?")：弹出确认对话框，返回 true 或 false。
• window.prompt("Enter your name:")：弹出输入对话框，返回用户输入的文本。

1.2 定时器

可以使用 setTimeout 和 setInterval 设置定时任务：

setTimeout(() => {
    console.log("2秒后执行一次");
}, 2000);  // 2 秒后执行一次

let intervalId = setInterval(() => {
    console.log("每3秒执行一次");
}, 3000);  // 每隔 3 秒执行一次

clearInterval(intervalId);   // 停止间隔任务

2. navigator 对象

navigator 对象提供有关浏览器的信息。

2.1 常见属性

• navigator.userAgent：用户代理字符串，包含浏览器和操作系统的信息。
• navigator.platform：用户操作系统平台。
• navigator.language：当前浏览器的语言设置。
• navigator.onLine：返回一个布尔值，指示用户是否连接到网络。

console.log(navigator.userAgent);    // 浏览器的用户代理信息
console.log(navigator.language);     // 浏览器语言
console.log(navigator.onLine);       // 是否在线

2.2 检查浏览器类型

通过 userAgent 字符串，可以识别用户的浏览器类型：

if (navigator.userAgent.indexOf("Chrome") !== -1) {
    console.log("当前使用的是 Chrome 浏览器");
}

3. location 对象

location 对象包含当前页面的 URL 信息，允许你访问和操作 URL。

3.1 常见属性

• location.href：当前页面的完整 URL。
• location.hostname：主机名（域名）。
• location.pathname：URL 中的路径部分。
• location.protocol：协议（例如 http: 或 https:）。

console.log(location.href);       // 当前页面的完整 URL
console.log(location.hostname);   // 主机名
console.log(location.pathname);   // 路径名
console.log(location.protocol);   // 协议

3.2 URL 导航

可以使用 location 对象重定向页面：

location.href = "https://www.example.com";   // 导航到新的 URL
location.reload();                           // 刷新当前页面
location.replace("https://www.example.com"); // 替换当前页面，不能使用浏览器的回退按钮

4. history 对象

history 对象允许你控制浏览器的会话历史记录。

4.1 导航方法

• history.back()：回到上一个页面，相当于浏览器的“后退”按钮。
• history.forward()：前往下一个页面，相当于浏览器的“前进”按钮。
• history.go(n)：根据相对于当前页面的位置来跳转，n 为整数，可以是正数或负数。

history.back();    // 后退一页
history.forward(); // 前进一页
history.go(-2);    // 回到前两个页面

4.2 history.length

返回会话历史记录中的条目数，表示用户访问过的页面数（当前窗口或标签页中）。

console.log(history.length); // 输出会话历史记录条目数

5. screen 对象

screen 对象提供有关用户屏幕的信息。

5.1 常见属性

• screen.width 和 screen.height：屏幕的宽度和高度。
• screen.availWidth 和 screen.availHeight：屏幕可用区域的宽度和高度，排除操作系统任务栏。
• screen.colorDepth：屏幕的颜色深度（位数）。

console.log(screen.width);        // 屏幕宽度
console.log(screen.height);       // 屏幕高度
console.log(screen.availWidth);   // 屏幕可用宽度
console.log(screen.availHeight);  // 屏幕可用高度
console.log(screen.colorDepth);   // 屏幕颜色深度

6. 弹出窗口控制

可以通过 window.open() 创建一个新的浏览器窗口或标签页，并使用 window.close() 关闭窗口。

6.1 打开新窗口

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

6.2 关闭窗口

myWindow.close();