【Java 进阶篇】JavaScript BOM（浏览器对象模型）详解

Myth丶恋晨 2024-02-21 07:25 75阅读 0赞

![在这里插入图片描述][ee6246a97e76456ea2a96231b3fde401.png]

BOM，即浏览器对象模型（Browser Object Model），是JavaScript与浏览器之间的接口，它允许JavaScript与浏览器进行交互，实现访问和控制浏览器窗口、文档和其他浏览器功能的功能。本文将详细介绍BOM的各个方面，包括窗口对象、定时器、历史记录、位置信息等，并提供示例代码来帮助您更好地理解和运用BOM。

### 1. 窗口对象 ###

窗口对象是BOM的核心，它代表浏览器中打开的窗口或选项卡。通过窗口对象，您可以执行各种操作，例如控制窗口的大小、位置、导航等。

#### 1.1 窗口大小 ####

通过`window`对象，您可以获取和设置浏览器窗口的大小。下面是一些常见的窗口大小操作：

*  获取窗口的宽度和高度：

const windowWidth = window.innerWidth;  // 获取窗口宽度
    const windowHeight = window.innerHeight;  // 获取窗口高度

*  调整窗口大小：

window.resizeTo(800, 600);  // 将窗口大小设置为宽800像素，高600像素

#### 1.2 窗口位置 ####

通过`window`对象，您可以获取和设置浏览器窗口在屏幕上的位置。以下是一些窗口位置的操作：

*  获取窗口左上角相对于屏幕的坐标：

const windowX = window.screenX;  // 获取窗口左上角的X坐标
    const windowY = window.screenY;  // 获取窗口左上角的Y坐标

*  移动窗口到指定位置：

window.moveTo(100, 100);  // 将窗口移动到屏幕上坐标(100, 100)的位置

#### 1.3 窗口导航 ####

窗口对象还提供了导航功能，可以用于在浏览器中加载不同的URL。

*  加载新页面：

window.location.href = 'https://www.example.com';  // 加载新的URL

*  刷新页面：

window.location.reload();  // 刷新当前页面

*  后退和前进：

window.history.back();  // 后退到上一个页面
    window.history.forward();  // 前进到下一个页面

#### 1.4 弹出对话框 ####

窗口对象允许您在浏览器中弹出对话框，包括警告框、确认框和提示框。

*  警告框：

window.alert('这是一个警告框');  // 弹出警告框

*  确认框：

const result = window.confirm('你确定要执行这个操作吗？');  // 弹出确认框

*  提示框：

const userInput = window.prompt('请输入您的姓名：', '默认值');  // 弹出提示框

### 2. 定时器 ###

BOM还提供了定时器功能，允许您在指定的时间间隔后执行代码。JavaScript中有两种类型的定时器：`setTimeout`和`setInterval`。

#### 2.1 setTimeout ####

`setTimeout`函数用于在指定的延迟时间后执行一次代码。

setTimeout(function() {
        
        // 在延迟时间后执行的代码
    }, 1000);  // 1000毫秒（1秒）后执行

#### 2.2 setInterval ####

`setInterval`函数用于按照指定的时间间隔重复执行代码。

setInterval(function() {
        
        // 每隔一段时间执行的代码
    }, 2000);  // 每隔2000毫秒（2秒）执行一次

定时器常用于制作动画、定时刷新数据以及执行周期性任务。

### 3. 历史记录 ###

BOM允许您访问和操作浏览器的历史记录。`history`对象包含与浏览历史相关的属性和方法。

#### 3.1 后退和前进 ####

使用`history`对象，您可以后退或前进到浏览历史中的不同页面。

history.back();  // 后退到上一个页面
    history.forward();  // 前进到下一个页面

#### 3.2 历史记录长度 ####

您可以使用`length`属性来获取历史记录的长度，即浏览历史中的页面数量。

const historyLength = history.length;

#### 3.3 手动添加历史记录 ####

通过`pushState`方法，您可以手动向浏览器的历史记录中添加新的页面状态。

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

上述代码会将新的页面状态添加到历史记录中，使浏览器地址栏显示为`/page1.html`。

### 4. 位置信息 ###

BOM还提供了位置信息相关的功能，包括获取用户的地理位置信息。

#### 4.1 获取地理位置 ####

使用`navigator`对象的`geolocation`属性，您可以获取用户的地理位置信息。

if ("geolocation" in navigator) {
        
        navigator.geolocation.getCurrentPosition(function(position) {
        
            const latitude = position.coords.latitude;
            const longitude = position.coords.longitude;
            console.log(`您的纬度是：${
          latitude}，经度是：${
          longitude}`);
        });
    }

这段代码会获取用户的地理位置，并显示纬度和经度信息。

#### 4.2 监听位置变化 ####

您还可以使用`watchPosition`方法来持续监听用户的位置变化。

### 5. 弹出窗口 ###

BOM允许您使用`window.open`方法在浏览器中打开新的弹出窗口。

const newWindow = window.open('https://www.example.com', '新窗口', 'width=400,height=300');

上述代码会在浏览器中打开一个新窗口，显示`https://www.example.com`页面，窗口大小为宽400像素、高300像素。

### 6. 屏幕信息 ###

`screen`对象包含有关用户屏幕的信息，如屏幕宽度、高度、颜色深度等。

### 7. Cookie ###

通过`document.cookie`，您可以读取和写入浏览器的Cookie。Cookie是一种存储在用户计算机上的小型文本文件，用于在多次访问之间存储和检索数据。

#### 7.1 读取Cookie ####

const cookieValue = document.cookie;

#### 7.2 写入Cookie ####

document.cookie = 'username=John; expires=Fri, 31 Dec 2022 23:59:59 GMT; path=/';

### 8. 总结 ###

BOM是JavaScript中与浏览器交互的重要部分，它允许您控制窗口大小、位置、导航，使用定时器执行代码，管理历史记录，获取位置信息，打开弹出窗口，访问屏幕信息，以及读取和写入Cookie。这些功能为开发者提供了丰富的工具来创建交互性强、用户友好的Web应用程序。

<table> 
 <tbody> 
  <tr> 
   <td> <strong><font>作者信息</font></strong><br> <br> <font> 作者 ： 繁依Fanyi</font><br> <font>CSDN：</font> <a href="https://blog.csdn.net/qq_21484461?spm=1000.2115.3001.5343" rel="nofollow"><font>https://techfanyi.blog.csdn.net</font></a><br> <font>掘金：</font><a href="https://juejin.cn/user/4154386571867191" rel="nofollow"><font>https://juejin.cn/user/4154386571867191</font></a> </td> 
  </tr> 
 </tbody> 
</table>

[ee6246a97e76456ea2a96231b3fde401.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/565a2bea76f543eeb94e1ebd27f8dcbc.png