【乔二参】浏览器对象模型 (BOM)详解

https://gitee.com/qercan/software-sharing

非常感谢您的支持！您的点赞、关注和评论是我创作的动力。我会继续努力，提供高质量内容，如有任何建议，请随时与我联系。

浏览器对象模型 (BOM)

定义

浏览器对象模型（Browser Object Model，简称BOM）是Web浏览器提供的一种对象结构，它允许JavaScript与浏览器进行交互。BOM提供了一系列的对象和接口，用于访问和操作浏览器的窗口、导航、历史记录、屏幕信息等功能。与DOM（文档对象模型）不同，BOM没有统一的标准，因此不同的浏览器可能会有不同的实现方式。

用途

BOM的主要用途包括：

1. 窗口管理：控制浏览器窗口的大小、位置、打开和关闭等。
2. 导航：获取当前页面的URL信息，进行页面跳转等。
3. 历史记录：操作浏览器的会话历史，如前进、后退等。
4. 屏幕信息：获取用户的屏幕分辨率等屏幕信息。
5. 位置信息：虽然通常通过Geolocation API实现，但BOM也涉及到了与位置相关的功能。
6. 弹出窗口：创建和管理新的浏览器窗口。

基本语法

BOM的语法主要依赖于JavaScript，并且由于BOM没有统一的标准，因此不同的浏览器可能会有不同的方法和属性。以下是一些常见的BOM对象和它们的基本用法：

1. Window对象：

   • 是BOM的顶层对象，代表浏览器的一个实例（即一个窗口）。
   • 常用方法包括：window.open()（打开新窗口）、window.close()（关闭当前窗口）、window.scrollBy()（滚动窗口）、window.scrollTo()（滚动到指定位置）等。
   • 常用属性包括：window.innerHeight（窗口内部高度）、window.innerWidth（窗口内部宽度）等。

2. Location对象：

   • 是Window对象的一个部分，用于获取和设置当前页面的URL信息。
   • 可以通过window.location访问。
   • 常用属性包括：href（完整的URL）、protocol（协议类型）、hostname（主机名）、pathname（路径名）、search（查询字符串）、hash（锚点）等。
   • 常用方法包括：reload()（重新加载页面）、replace()（替换当前页面）等。

3. History对象：

   • 用于操作浏览器的会话历史。
   • 可以通过window.history访问。
   • 常用方法包括：back()（后退）、forward()（前进）、go()（跳转到历史记录中的某个页面）等。

4. Navigator对象：

   • 提供了有关浏览器的信息。
   • 可以通过window.navigator访问。
   • 常用属性包括：userAgent（浏览器的用户代理字符串）、platform（运行浏览器的操作系统平台）、appName（浏览器的名称）等。

5. Screen对象：

   • 提供了有关用户屏幕的信息。
   • 可以通过window.screen访问。
   • 常用属性包括：width（屏幕的宽度）、height（屏幕的高度）、availWidth（屏幕的可用宽度）、availHeight（屏幕的可用高度）等。

常见示例

1. 打开新窗口：

   window.open('https://www.example.com', '_blank');
   

2. 关闭当前窗口（注意：出于安全考虑，现代浏览器可能限制脚本关闭非脚本打开的窗口）：

   window.close();
   

3. 滚动到页面顶部：

   window.scrollTo(0, 0);
   

4. 获取当前页面的URL：

   var currentURL = window.location.href;
   console.log(currentURL);
   

5. 后退到上一页：

   window.history.back();
   

6. 检查用户代理字符串（用于识别浏览器类型）：

   var userAgent = navigator.userAgent;
   console.log(userAgent);
   

这些示例展示了BOM的一些基本用法，但请注意，由于BOM没有统一的标准，因此在实际开发中需要考虑到不同浏览器的兼容性问题。

友情提示