JavaScript BOM 对象详解

JavaScript BOM 对象详解

在 JavaScript 编程中，BOM（Browser Object Model）是指浏览器对象模型，它提供了一组用于与浏览器窗口进行交互的对象。BOM 对象允许开发者控制浏览器的行为和获取浏览器的信息。本文将详细介绍 JavaScript 中的 BOM 对象，并通过丰富的示例帮助你更好地理解。

重点 alert、confirm、定时器

1. Window 对象

window 对象是 BOM 的核心对象，代表浏览器窗口或标签页。所有全局 JavaScript 对象、函数和变量都是 window 对象的成员。

1.1 常用属性和方法

• 属性

  • window.innerHeight：浏览器窗口的内部高度（包括滚动条）。
  • window.innerWidth：浏览器窗口的内部宽度（包括滚动条）。
  • window.location：当前页面的 URL 信息。
  • window.navigator：浏览器的信息。
  • window.document：当前页面的文档对象。

• 方法

  • window.alert()：显示一个警告对话框。
  • window.confirm()：显示一个确认对话框。
  • window.prompt()：显示一个提示对话框。
  • window.open()：打开一个新的浏览器窗口或标签页。
  • window.close()：关闭当前窗口。
  • window.setTimeout()：设置一个定时器，在指定时间后执行代码。
  • window.setInterval()：设置一个定时器，每隔指定时间执行代码。

1.2 示例

// 获取浏览器窗口的内部高度和宽度
console.log(window.innerHeight);
console.log(window.innerWidth);

// 显示一个警告对话框
window.alert("Hello, World!");

// 显示一个确认对话框
let result = window.confirm("Are you sure?");
console.log(result); // true 或 false

// 显示一个提示对话框
let name = window.prompt("Please enter your name:");
console.log(name);

// 打开一个新的窗口
let newWindow = window.open("https://www.example.com", "_blank");

// 关闭当前窗口
// window.close();

// 设置一个定时器，3秒后执行代码
setTimeout(function() {
  console.log("3 seconds have passed.");
}, 3000);

// 设置一个定时器，每隔1秒执行代码
let intervalId = setInterval(function() {
  console.log("1 second has passed.");
}, 1000);

// 清除定时器
setTimeout(function() {
  clearInterval(intervalId);
}, 5000);

2. Location 对象

location 对象包含当前页面的 URL 信息，可以通过 window.location 或 document.location 访问。

2.1 常用属性和方法

• 属性

  • location.href：当前页面的完整 URL。
  • location.protocol：当前页面的协议（如 http: 或 https:）。
  • location.host：当前页面的主机名和端口号。
  • location.hostname：当前页面的主机名。
  • location.port：当前页面的端口号。
  • location.pathname：当前页面的路径部分。
  • location.search：当前页面的查询字符串部分。
  • location.hash：当前页面的锚点部分。

• 方法

  • location.assign()：加载一个新的文档。
  • location.reload()：重新加载当前文档。
  • location.replace()：用新的文档替换当前文档。

2.2 示例

// 获取当前页面的完整 URL
console.log(location.href);

// 获取当前页面的协议
console.log(location.protocol);

// 获取当前页面的主机名和端口号
console.log(location.host);

// 获取当前页面的主机名
console.log(location.hostname);

// 获取当前页面的端口号
console.log(location.port);

// 获取当前页面的路径部分
console.log(location.pathname);

// 获取当前页面的查询字符串部分
console.log(location.search);

// 获取当前页面的锚点部分
console.log(location.hash);

// 加载一个新的文档
location.assign("https://www.example.com");

// 重新加载当前文档
location.reload();

// 用新的文档替换当前文档
location.replace("https://www.example.com");

3. Navigator 对象

navigator 对象包含浏览器的信息，可以通过 window.navigator 访问。

3.1 常用属性

• navigator.userAgent：浏览器的用户代理字符串。
• navigator.platform：浏览器运行的操作系统平台。
• navigator.language：浏览器的首选语言。
• navigator.onLine：浏览器是否在线。

3.2 示例

// 获取浏览器的用户代理字符串
console.log(navigator.userAgent);

// 获取浏览器运行的操作系统平台
console.log(navigator.platform);

// 获取浏览器的首选语言
console.log(navigator.language);

// 获取浏览器是否在线
console.log(navigator.onLine);

4. History 对象

history 对象包含浏览器的历史记录，可以通过 window.history 访问。

4.1 常用方法

• history.back()：加载历史记录中的前一个页面。
• history.forward()：加载历史记录中的下一个页面。
• history.go()：加载历史记录中的指定页面。

4.2 示例

// 加载历史记录中的前一个页面
history.back();

// 加载历史记录中的下一个页面
history.forward();

// 加载历史记录中的指定页面
history.go(-1); // 相当于 history.back()
history.go(1);  // 相当于 history.forward()

5. Screen 对象

screen 对象包含屏幕的信息，可以通过 window.screen 访问。

5.1 常用属性

• screen.width：屏幕的宽度。
• screen.height：屏幕的高度。
• screen.availWidth：屏幕的可用宽度（不包括任务栏等）。
• screen.availHeight：屏幕的可用高度（不包括任务栏等）。

5.2 示例

// 获取屏幕的宽度
console.log(screen.width);

// 获取屏幕的高度
console.log(screen.height);

// 获取屏幕的可用宽度
console.log(screen.availWidth);

// 获取屏幕的可用高度
console.log(screen.availHeight);

通过本文的详细讲解，相信你已经对 JavaScript 中的 BOM 对象有了全面的了解。在实际编程中，合理使用 BOM 对象可以提高代码的效率和可读性。希望这些知识对你有所帮助！