BOM概述

我们今天要讲BOM（浏览器对象模型）

BOM概述：

提供独立于内容而与浏览器窗口进行交互的对象，核心对象：windows

有一系列的对象构成，每个对象都有其属性

BOM 对象也不是 JavaScript 语言的一部分，而是由浏览器提供的 API。

window对象的常见事件：

window 对象作为 BOM 的核心对象之一，提供了许多常见的事件，可以用来监听和处理用户与浏览器窗口交互的各种情况。以下是一些常见的 window对象事件：

1. load：当文档和所有相关资源（例如图片和样式表）加载完毕后触发。

2. unload：在窗口或框架卸载或关闭之前触发，通常用于执行清理操作。

3. resize：当窗口或框架大小发生变化时触发，可以用来重新布局页面或调整元素大小。

4. scroll：当用户滚动窗口或滚动区域时触发，可以用来实现滚动效果或无限滚动加载。

5. beforeunload：在窗口或框架将要卸载或关闭时触发，可以用来提示用户是否要保存未保存的数据。

6. error：当文档或其它资源无法加载时触发，可以用来捕获和处理 JavaScript 错误和未捕获异常。

7. focus 和 blur：当窗口或框架获得或失去焦点时触发，可以用来实现键盘快捷键和提示用户。

8. message：当从另一个窗口或框架接收到消息时触发，可以用来实现跨窗口通信。

以上是一些常见的window对象事件，可以根据具体需求来选择使用哪些事件。注意，不同的浏览器可能支持不同的事件，可以在 MDN 等网站上查看浏览器兼容性。

window 对象的常见操作，包括以下几个方面：

1. 全局属性和方法：window 对象本身也是一个全局对象，它包含许多全局属性和方法，例如 console、setTimeout、setInterval 等，可以直接通过 window 对象来使用。

2. 弹窗操作：window对象提供了一系列用于弹出对话框和警告框的方法，例如alert、confirm、prompt 等，可以用来显示消息、询问用户输入等。

3. 窗口操作：window对象可以用来操作浏览器窗口，例如 open、close、resizeTo 等，可以用来打开新窗口、关闭当前窗口、调整窗口大小等。

4. 定时器操作：window对象提供了两个常用的定时器方法，即 setTimeout 和 setInterval，可以用来定时执行代码或者轮询后端接口。

5. 历史记录操作：window对象提供了一些方法，可以用来操作浏览器的历史记录，例如 history.back、history.forward、history.pushState等。

定时器

setTimeout() 方法可以在 BOM 中被多次调用，每次调用会返回一个唯一的计时器标识符，用于在需要的时候取消定时器。

以下是一个使用 setTimeout() 方法的例子，其中调用了两次 setTimeout() 方法，分别在 1000 毫秒和 2000 毫秒后分别执行两个函数：

​
​//1000ms的计时器
let timer1 = setTimeout(() => {
  console.log('This is function 1.')
}, 1000);
//2000ms的计时器
let timer2 = setTimeout(() => {
  console.log('This is function 2.')
}, 2000);
 
let timer3=setTimeout(()=>
{
console.log('功能')
}​,3000);

​

可以用clearTimeout()来截止：

clearTimeout(timer1);
clearTimeout(timer2);
clearTimeout(timer3);

location对象

在 JavaScript 中，location`对象代表当前窗口的 URL 信息，可以用于获取和设置浏览器的 URL。它是 BOM 中的一个重要对象，提供了许多有用的方法和属性。

location.href：获取或设置当前页面的 URL。
location.protocol：获取或设置当前页面的协议。
location.host：获取或设置当前页面的主机名和端口号。
location.hostname：获取或设置当前页面的主机名。
location.port：获取或设置当前页面的端口号。
location.pathname：获取或设置当前页面的路径部分。
location.search：获取或设置当前页面的查询字符串部分。
location.hash：获取或设置当前页面的哈希部分。
location.reload()：重新加载当前页面。
location.replace(url)：用指定的 URL 替换当前页面。

​
​
// 获取当前页面的 URL(也就是完整地址)
console.log(location.href);

// 跳转到指定的 URL
location.href = 'https://www.iqiyi.com/';

// 获取当前页面的主机名和端口号
console.log(location.host);//主机名：www.iqiyi.com，端口号：443

// 跳转到指定的 URL，但不会添加到浏览器的历史记录中
location.replace('https://www.iqiyi.com/');

​

​

navigator对象

用于表示当前浏览器的信息和状态。该对象提供了许多属性和方法，可用于获取浏览器的名称、版本、操作系统、语言偏好、地理位置信息、媒体设备的使用权限等等。

navigator对象是 JavaScript 中表示浏览器相关信息的对象，它包含了与浏览器有关的信息和方法。navigator对象是一个全局对象，它的属性和方法可以在任何地方使用。

navigator对象的一些常用属性如下：

navigator.userAgent：包含了浏览器的 user-agent 字符串，可以用来判断当前浏览器的类型和版本。
navigator.platform：包含了当前操作系统的名称和版本号，可以用来判断当前操作系统的类型和版本。
navigator.language：包含了浏览器的默认语言，可以用来获取用户的语言偏好。

navigator对象还包含了一些方法，如下：

navigator.geolocation.getCurrentPosition(successCallback, errorCallback)：用于获取当前设备的地理位置信息。
navigator.mediaDevices.getUserMedia(constraints)：用于获取当前设备的摄像头或麦克风等媒体设备的使用权限。
navigator.cookieEnabled：返回一个布尔值，表示浏览器是否支持 cookie。

​
var idea1=navigator.userAgent;
console.log(ieda1);
var idea2=navigator.language;
console.log(idea2);
if (navigator.mediaDevices) {
      navigator.mediaDevices.getUserMedia({ audio: true, video: true })
        .then(function(stream) {
          console.log("获取媒体设备成功");
        })
        .catch(function(error) {
          console.log("获取媒体设备失败：" + error.message);
        });
    } else {
      console.log("该浏览器不支持获取媒体设备");
    }

​

history对象

history 对象是 JavaScript 的一个内置对象，用于管理浏览器的历史记录。通过 history 对象，我们可以访问浏览器历史记录中的各个页面，并且可以进行前进、后退等操作。

history对象的常用属性和方法如下：

history.length：返回浏览器历史记录中的页面数量；
history.forward()：前进到浏览器历史记录中的下一个页面；
history.back()：后退到浏览器历史记录中的上一个页面；
history.go(n)：前进或后退到浏览器历史记录中的第 n 个页面，n 可以是正数、负数或 0。

// 后退到上一个页面
history.back();

// 前进到下一个页面
history.forward();

// 前进到历史记录中的第三个页面
history.go(2);

// 后退到历史记录中的第一个页面
history.go(-history.length + 1);

通过调用 history.go 方法，并传入一个整数参数，可以前进或后退到历史记录中的指定页面。