我们今天要讲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 方法,并传入一个整数参数,可以前进或后退到历史记录中的指定页面。