【JavaScript】之浏览器对象模型（BOM）详解

浏览器对象模型 (BOM：Browser Object Model ) 是 JavaScript 的一部分，它允许你与浏览器窗口进行交互。不同于 DOM（文档对象模型）主要处理网页内容，BOM 关注的是浏览器窗口本身及其各种特性，例如导航、窗口大小、浏览器历史记录等等。就是JavaScript将浏览器的各个组成部分封装成了对象。我们要操作浏览器的部分功能，可以通过操作BOM对象的相关属性或者函数来完成。

BOM中提供了如下5个对象：

一、BOM 的核心：window、 location 对象

window 对象是 BOM 的顶层对象，代表着浏览器窗口本身。所有其他 BOM 对象都是 window 对象的属性。这意味着你可以直接使用 alert() 而不是 window.alert()，因为 window 是全局作用域。

二、window 对象

window对象提供了获取其他BOM对象的属性：

也就是说我们要使用location对象，只需要通过代码window.location或者简写location即可使用

window也提供了一些常用的函数，如下表格所示：

• alert()函数：弹出警告框，函数的内容就是警告框的内容

  <script>
      //window对象是全局对象，window对象的属性和方法在调用时可以省略window.
      window.alert("Hello BOM");
      alert("Hello BOM Window");
  </script>

  

  

• confirm()函数：弹出确认框，并且提供用户2个按钮，分别是确认和取消。

  confirm("您确认删除该记录吗?");

  

但是我们怎么知道用户点击了确认还是取消呢？所以这个函数有一个返回值，当用户点击确认时，返回true，点击取消时，返回false。我们根据返回值来决定是否执行后续操作。修改代码如下：再次运行，可以查看返回值true或者false

var flag = confirm("您确认删除该记录吗?");
alert(flag);

点击确定后：true

• setInterval(fn,毫秒值)：定时器，用于周期性的执行某个功能，并且是循环执行。该函数需要传递2个参数：

  fn:函数，需要周期性执行的功能代码

  毫秒值：间隔时间

  //定时器 - setInterval -- 周期性的执行某一个函数
  var i = 0;
  setInterval(function(){
       i++;
       console.log("定时器执行了"+i+"次");
  },2000);

  刷新页面，浏览器每个一段时间都会在控制台输出，结果如下：

• setTimeout(fn,毫秒值) ：定时器，只会在一段时间后执行一次功能。参数和上述setInterval一致

  //定时器 - setTimeout -- 延迟指定时间执行一次 
  setTimeout(function(){
      alert("JS");
  },3000);

  浏览器打开，3s后弹框，关闭弹框，发现再也不会弹框了。（以下图片为三秒后弹框）

三、location 对象

• window.location 对象: 控制浏览器导航，包含以下常用属性和方法：

  • href：获取或设置当前 URL。

    console.log(window.location.href); // 获取当前URL
    window.location.href = "https://www.example.com"; // 跳转到 example.com

  • hostname：返回当前 URL 的主机名。

    console.log(window.location.hostname); // 输出 "www.example.com" (如果当前URL是https://www.example.com)

  • pathname：返回当前 URL 的路径名。

    console.log(window.location.pathname); // 输出 "/path/to/page.html" (如果当前URL是https://www.example.com/path/to/page.html)

  • reload()：重新加载当前页面。

    window.location.reload();

  • assign()：加载新的 URL。

    window.location.assign("https://www.google.com"); // 跳转到 google.com

四、history 对象

• window.history 对象: 操作浏览器历史记录。

  • back()：返回上一页。

    window.history.back();

  • forward()：前进到下一页。

    window.history.forward();

  • go()：跳转到指定页面（相对当前页面）。

    window.history.go(-2); // 后退两页
    window.history.go(1);  // 前进一页，等同于 forward()

五、navigator 对象

• window.navigator 对象: 提供浏览器和操作系统的信息。

  • userAgent：返回用户代理字符串，包含浏览器版本、操作系统等信息。

    console.log(navigator.userAgent); // 输出类似 "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36"

  • online：指示浏览器是否在线。

    if (navigator.online) { 
        console.log("在线"); 
    } else {
        console.log("离线");
    }

六、获取窗口尺寸和位置

• 获取浏览器窗口的尺寸和位置：

  console.log("Inner Width:", window.innerWidth);
  console.log("Inner Height:", window.innerHeight);
  console.log("Outer Width:", window.outerWidth);
  console.log("Outer Height:", window.outerHeight);
  console.log("Screen X:", window.screenX);
  console.log("Screen Y:", window.screenY);

• window.scrollTo(x, y)：将文档滚动到指定坐标。

  window.scrollTo(0, 100); // 垂直滚动到 100px
  window.scrollTo({ top: 200, left: 0, behavior: 'smooth' }); // 平滑滚动到顶部 200px，左侧 0px

总结

BOM 为 JavaScript 提供了与浏览器交互的强大能力。理解 BOM 的核心对象和方法，可以让你更好地控制浏览器窗口、处理用户交互和获取浏览器信息，从而创建更丰富的 Web 应用。 希望本文和其中的示例能帮助你更好地掌握 JavaScript BOM！