JavaScript中的BOM（Browser Object Model）|极客笔记

JavaScript中的BOM（Browser Object Model）

BOM（Browser Object Model）是JavaScript中的一个重要概念，它提供了一组对象和方法，用于操作浏览器窗口和窗体（frameset）的内容。在本文中，我们将详细介绍JavaScript中的BOM，并探讨其常用的对象和方法。

1. `window`对象

在JavaScript中，window对象表示全局窗口对象，它是BOM的入口点。我们可以通过window对象来访问和操作浏览器窗口的各种属性和方法。

1.1 窗口属性

window对象提供了许多属性，用于获取窗口的各种信息，例如窗口的大小、位置、URL等。下面是一些常用的窗口属性：

window.innerWidth：窗口内部宽度（不包括滚动条和边框宽度）。
window.innerHeight：窗口内部高度（不包括滚动条和边框高度）。
window.outerWidth：窗口外部宽度（包括滚动条和边框宽度）。
window.outerHeight：窗口外部高度（包括滚动条和边框高度）。
window.pageXOffset：窗口滚动条水平偏移量。
window.pageYOffset：窗口滚动条垂直偏移量。
window.location：窗口的URL信息。

下面是一个示例，演示如何使用window对象的属性：

console.log("窗口内部宽度：" + window.innerWidth);
console.log("窗口内部高度：" + window.innerHeight);
console.log("窗口外部宽度：" + window.outerWidth);
console.log("窗口外部高度：" + window.outerHeight);
console.log("窗口滚动条水平偏移量：" + window.pageXOffset);
console.log("窗口滚动条垂直偏移量：" + window.pageYOffset);
console.log("当前页面的URL：" + window.location.href);

运行结果：

窗口内部宽度：1366
窗口内部高度：641
窗口外部宽度：1366
窗口外部高度：768
窗口滚动条水平偏移量：0
窗口滚动条垂直偏移量：0
当前页面的URL：http://example.com

1.2 窗口方法

除了属性，window对象还提供了一些方法，用于执行各种窗口操作。下面是一些常用的窗口方法：

window.open(url, windowName, features)：打开一个新窗口或标签页。
window.close()：关闭当前窗口或标签页。
window.alert(message)：弹出一个警告框，显示指定的消息。
window.confirm(message)：弹出一个确认框，让用户确认或取消一个操作。
window.prompt(message, defaultValue)：弹出一个提示框，让用户输入文本。

下面是一个示例，演示如何使用window对象的方法：

window.open("http://example.com", "_blank", "width=800,height=600");
window.alert("操作成功！");
if (window.confirm("确认要删除吗？")) {
    console.log("用户确认了删除操作");
} else {
    console.log("用户取消了删除操作");
}
var name = window.prompt("请输入您的名字：", "John Doe");
console.log("用户输入的名字是：" + name);

运行结果：（假设用户在prompt对话框中输入了”John Doe”）

（弹出一个新窗口，打开http://example.com）
（弹出一个警告框，显示"操作成功！"）
（弹出一个确认框，显示"确认要删除吗？"，用户点击了确认按钮）
用户确认了删除操作
（弹出一个提示框，显示"请输入您的名字："，用户在输入框中输入了"John Doe"）
用户输入的名字是：John Doe

2. `navigator`对象

navigator对象提供了有关浏览器的信息，例如浏览器的名称、版本、用户代理（User Agent）等。我们可以通过navigator对象来获取这些信息。

下面是一些常用的navigator对象属性：

navigator.userAgent：浏览器的用户代理字符串。
navigator.cookieEnabled：表示浏览器是否支持cookie。

下面是一个示例，演示如何使用navigator对象的属性：

console.log("浏览器的用户代理：" + navigator.userAgent);
console.log("浏览器是否支持cookie：" + navigator.cookieEnabled);

运行结果：

浏览器的用户代理：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36
浏览器是否支持cookie：true

3. `screen`对象

screen对象提供了有关用户屏幕的信息，例如屏幕的宽度、高度、颜色深度等。我们可以通过screen对象来获取这些信息。

下面是一些常用的screen对象属性：

screen.width：屏幕的宽度（以像素为单位）。
screen.height：屏幕的高度（以像素为单位）。
screen.availWidth：屏幕的可用宽度（减去任务栏等系统部件的宽度）。
screen.availHeight：屏幕的可用高度（减去任务栏等系统部件的高度）。

下面是一个示例，演示如何使用screen对象的属性：

console.log("屏幕的宽度：" + screen.width);
console.log("屏幕的高度：" + screen.height);
console.log("屏幕的可用宽度：" + screen.availWidth);
console.log("屏幕的可用高度：" + screen.availHeight);

运行结果：

屏幕的宽度：1920
屏幕的高度：1080
屏幕的可用宽度：1920
屏幕的可用高度：1040

4. `history`对象

history对象提供了浏览器历史记录的控制功能，例如前进、后退和跳转到指定页面等。我们可以通过history对象来操作浏览器的历史记录。

下面是一些常用的history对象方法：

history.back()：后退到上一个页面。
history.forward()：前进到下一个页面。
history.go(n)：跳转到指定的页面，其中n可以是一个正整数（前进n个页面）或负整数（后退n个页面）。
-下面是一个示例，演示如何使用history对象的方法：

console.log("当前页面的URL：" + window.location.href); // http://example.com/page1

history.pushState(null, null, "page2.html");
console.log("当前页面的URL：" + window.location.href); // http://example.com/page2.html

history.back();
console.log("当前页面的URL：" + window.location.href); // http://example.com/page1

history.forward();
console.log("当前页面的URL：" + window.location.href); // http://example.com/page2.html

history.go(-1);
console.log("当前页面的URL：" + window.location.href); // http://example.com/page1

history.go(2);
console.log("当前页面的URL：" + window.location.href); // http://example.com/page3.html

运行结果：

当前页面的URL：http://example.com/page1
当前页面的URL：http://example.com/page2.html
当前页面的URL：http://example.com/page1
当前页面的URL：http://example.com/page2.html
当前页面的URL：http://example.com/page1
当前页面的URL：http://example.com/page3.html