BOM（浏览器对象模型）是指浏览器提供的一组API，用于控制浏览器窗口或标签页。我们可以使用BOM来操作浏览器窗口的大小、位置、前进后退等行为，以及判断当前浏览器类型、浏览器版本和语言。

一起来学习JavaScript的BOM操作

什么是BOM

BOM（浏览器对象模型）是指浏览器提供的一组API，用于控制浏览器窗口或标签页。我们可以使用BOM来操作浏览器窗口的大小、位置、前进后退等行为，以及判断当前浏览器类型、浏览器版本和语言。

BOM对象

BOM主要由4个对象组成：

• window对象：代表整个浏览器窗口，是BOM对象的最外层对象。
• navigator对象：提供了浏览器的一些信息，例如浏览器厂商、浏览器版本、操作系统等。
• location对象：提供了浏览器的URL相关信息，例如当前页面的URL地址，可以用于页面跳转。
• screen对象：提供了当前屏幕分辨率相关信息，例如屏幕的宽度、高度、像素信息等。

操作BOM对象

window对象

window对象是BOM对象中最常用的对象。通过window，我们可以操作浏览器窗口的大小、位置、前进后退等行为。

以下是一些常见使用window对象的示例：

打开新窗口

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

关闭窗口

window.close();

改变窗口位置和大小

window.moveTo(100, 100);
window.resizeTo(500, 500);

前进和后退

window.history.forward();
window.history.back();

navigator对象

navigator对象提供了浏览器的一些信息，例如浏览器厂商、浏览器版本、操作系统等。

以下是一些常见使用navigator对象的示例：

获取浏览器名称和版本

console.log(navigator.appName);
console.log(navigator.appVersion);

判断是否为移动端浏览器

if (navigator.userAgent.match(/(iPhone|iPod|iPad|Android)/i)) {
    console.log('This is a mobile browser');
} else {
    console.log('This is not a mobile browser');
}

location对象

location对象提供了浏览器的URL相关信息，例如当前页面的URL地址，可以用于页面跳转。

以下是一些常见使用location对象的示例：

获取当前页面URL地址

console.log(location.href);

重定向页面

location.href = 'http://www.example.com';

screen对象

screen对象提供了当前屏幕分辨率相关信息，例如屏幕的宽度、高度、像素信息等。

以下是一些常见使用screen对象的示例：

获取屏幕分辨率

console.log(screen.width);
console.log(screen.height);

结论

BOM提供了一组API，用于控制浏览器窗口的大小、位置、前进后退等行为，以及判断当前浏览器类型、浏览器版本和语言。我们可以使用BOM来实现一些常用的功能，例如打开新窗口、关闭窗口、改变窗口位置和大小、前进和后退、获取浏览器名称和版本、判断是否为移动端浏览器、获取当前页面URL地址、重定向页面，等等。