JavaScript BOM详解

BOM（浏览器对象模型，Browser Object Model）提供了与浏览器交互的API，它可以使我们控制浏览器窗口、控制浏览器的前进和后退、获取浏览器的位置和状态，甚至可以修改Web页面的外观和行为。本文将详细讲解JavaScript中BOM的特性和应用。

窗口对象

窗口对象是BOM中最关键的对象之一，它代表打开的浏览器窗口或选项卡。对于BOM而言，所有对象都是Window对象的属性或方法。

打开和关闭窗口

在JavaScript中，可以使用window.open()方法来打开一个新的浏览器窗口。此方法会返回一个代表新窗口的Window对象:

window.open('http://www.example.com', '_blank', 'width=400,height=400');

这个方法的第一个参数是要打开的URL，第二个参数是窗口的名称，如果名称相同，则仍然使用同一个窗口。第三个参数是一个字符串，其中包含各种窗口特性，如窗口的宽度和高度。

如果要关闭当前窗口，可以使用window.close()方法：

window.close();

获取和设置窗口位置和尺寸

可以使用window.screen属性来获取屏幕的大小和分辨率。此外，还可以使用window.innerWidth和window.innerHeight属性获取窗口的大小。

// 获取屏幕大小
console.log(window.screen.width);
console.log(window.screen.height);

// 获取窗口大小
console.log(window.innerWidth);
console.log(window.innerHeight);

可以使用window.resizeTo()方法和window.moveTo()方法来调整窗口大小和位置：

// 调整窗口大小
window.resizeTo(500, 500);

// 移动窗口位置
window.moveTo(0, 0);

弹出对话框和确认框

可以使用window.alert()方法弹出一个对话框：

window.alert('Hello, world!');

使用window.prompt()方法可以弹出一个询问对话框：

var result = window.prompt('Please enter your name:');
console.log(result);

使用window.confirm()方法可以弹出一个确认对话框：

var result = window.confirm('Are you sure you want to delete this item?');
console.log(result);

历史记录对象

历史记录对象可以访问浏览器的历史记录，允许使用者向前和向后浏览出现在浏览器中的文档。在JavaScript中，可以使用window.history对象访问浏览器的历史记录。

前进和后退

可以使用window.history.back()方法来后退一步，使用window.history.forward()方法来前进一步：

// 后退一步
window.history.back();

// 前进一步
window.history.forward();

历史记录长度

可以使用window.history.length属性来获取历史记录的长度：

console.log(window.history.length);

修改历史记录

可以使用window.history.pushState()方法来在浏览器历史记录中添加一个新的状态：

window.history.pushState({page: 1}, '', '/page1');

位置对象

位置对象代表浏览器窗口中当前文档的位置。在JavaScript中，可以使用window.location对象来获取或设置当前文档的URL。

获取和设置URL

可以使用window.location.href属性来获取或设置当前文档的URL：

// 获取当前URL
console.log(window.location.href);

// 设置当前URL
window.location.href = 'http://www.example.com';

获取URL中的参数

可以使用window.location.search属性来获取URL中的参数：

console.log(window.location.search);

重定向页面

可以使用window.location.replace()方法来重定向浏览器到新的URL：

window.location.replace('http://www.example.com');

示例说明

示例一：弹出对话框

function showAlert() {
  window.alert('Hello, world!');
}

示例二：重定向页面

function redirect() {
  window.location.replace('http://www.example.com');
}