一、Window对象
1.BOM(浏览器对象模型)
BOM(Browser Object Model)是JavaScript中用来与浏览器交互的一组对象。BOM提供了访问和控制浏览器窗口、历史记录、定时器、以及与浏览器进行通信的能力。
BOM包括以下一些常用的对象:
-
window对象:代表浏览器窗口,可以通过window对象访问和控制浏览器的各种属性和方法,如窗口的大小、位置、打开新窗口、关闭窗口等。
-
location对象:代表浏览器地址栏的URL,可以通过location对象获取和修改当前页面的URL信息,如获取URL中的参数、跳转到新的URL等。
-
navigator对象:提供了关于浏览器的信息,如浏览器的名称、版本、操作系统等。
-
history对象:代表浏览器的历史记录,可以通过history对象访问和操作浏览器的历史记录,如前进、后退、跳转到指定页面等。
-
screen对象:提供了关于用户屏幕的信息,如屏幕的宽度、高度、像素密度等。
除了以上常用的对象,BOM还包括一些其他对象和方法,如定时器(setTimeout、setInterval)、弹窗(alert、confirm、prompt)等。
需要注意的是,BOM只定义了一组对象和方法,具体实现和支持度取决于浏览器,不同的浏览器可能会有不同的实现和扩展。因此,在编写跨浏览器的JavaScript代码时,需要注意BOM的兼容性。
这里主要对window对象进行讲解:
- window对象是一个全局对象,也可以说是JavaScript中的顶级对象;
- 像document、alert()、console.log()这些都是window的属性,基本BOM的属性和方法都是window的;
- 所有通过var定义在全局作用域中的变量、函数都会变成window对象的属性和方法;
- window对象下的属性和方法调用的时候可以省略window。
2.JS执行机制
JavaScript语言的一大特点就是单线程。也就是说。同一个时间只能做一件事。
这是因为JavaScript这门脚本语言诞生的使命所致——JavaScript是为处理页面中用户的交互,以及操作DOM而诞生的。比如我们对某个DOM元素添加和删除操作,不能同时进行。应该先进行添加,之后再删除。
单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务。这样所导致的问题是:如果JS执行的时间过长,这样就会造成页面的渲染不连贯,导致页面渲染加载阻塞的感觉。
为了解决这个问题,利用多核CPU的计算能力,HTML5提出Web Worker标准,允许JavaScript脚本创建多个线程。于是,js中出现了同步和异步。
js的同步任务都是再主线程上执行的,而异步任务是通过回调函数实现,一般来说,异步任务有普通事件,资源加载和定时器三种,js中这种异步任务会通过各种队列去解决js阻塞问题。
这里简单的去介绍一下事件循环:
- 先在主线程中进行同步任务;
- 遇见异步任务时将异步任务加入到任务队列中;
- 一旦主线程中的所有任务执行完毕,系统就会按次序读取任务队列中的异步任务,于是被读取任务队列的任务,开始执行。
由于主线程不断的重复获得任务、执行任务,再获取、再执行,我们则称该机制为事件循环(event loop),在之前一篇文章中,我对其进行了较为详细的讲解:
浏览器事件循环-CSDN博客
3.location对象
location的数据类型是对象,它拆分并保存了URL地址的各个组成部分。
常用属性和方法
- href属性获取完整的URL地址,对其赋值时用于地址的跳转;
- search属性获取地址中携带的参数,符号?后面部分;
- hash属性获取地址中的哈希值,符号#后面部分;
- reload方法用来刷新当前页面,传入参数true时表示强制刷新。
使用方法展示
(1)href属性
console.log(location.href);
//通过js方式跳转目标地址
location.href = 'https://blog.csdn.net/2301_77523019?type=blog';
(2)search属性和hash属性
console.log(location.search);
console.log(location.hash);
(3)reload方法
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>dome</title></head><body>123</body><script>setInterval(()=>{location.reload(true);},1000)</script>
</html>
4.navigator对象
在JavaScript中,navigator
对象是浏览器的内置对象之一。它提供了关于浏览器的相关信息,允许JavaScript代码与浏览器进行通信和操作。
以下是navigator
对象的一些常见属性和方法:
navigator.userAgent
:返回包含用户代理字符串的字符串,该字符串标识了浏览器的类型和版本。navigator.platform
:返回浏览器运行的操作系统平台。navigator.language
:返回浏览器使用的默认语言。navigator.cookieEnabled
:返回一个布尔值,表示浏览器是否允许使用cookies。navigator.onLine
:返回一个布尔值,表示当前是否处于联网状态。navigator.geolocation
:返回一个Geolocation
对象,允许通过浏览器获取设备的地理位置信息。navigator.mediaDevices
:返回一个MediaDevices
对象,允许通过浏览器访问媒体设备,如摄像头和麦克风。navigator.sendBeacon()
:允许在页面卸载后异步发送数据到服务器,以避免在卸载页面时数据丢失。
除了上述属性和方法外,navigator
对象还提供了其他一些功能,比如屏幕信息和浏览器插件信息等。可以根据具体需求使用navigator
对象的相关属性和方法来实现与浏览器的交互和操作。
这里对两个方法进行举例说明
当使用navigator.userAgent
时,我们可以通过判断浏览器的用户代理字符串来执行特定的操作或逻辑。
下面是一个使用navigator.userAgent
的示例,用于检测用户是否使用移动设备浏览网页:
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {console.log("您正在使用移动设备浏览网页");
} else {console.log("您正在使用桌面设备浏览网页");
}
在上面的示例中,我们使用正则表达式来匹配常见的移动设备型号,如果用户代理字符串中包含其中任何一个移动设备的关键词,则认为用户当前正在使用移动设备浏览网页。
当使用navigator.platform
时,我们可以获取用户的操作系统平台信息。下面是一个示例,用于显示用户的操作系统平台:
console.log("您的操作系统平台是:" + navigator.platform);
该示例将在控制台中显示用户的操作系统平台信息,如Windows、Mac、Linux等。
需要注意的是,用户代理字符串和操作系统平台信息并不是绝对可靠的,因为它们可以被用户手动修改或伪造。因此,在使用这些信息时,应该仅作为参考,在实际应用中需要进行更严格的验证和处理。
5.histroy对象
history
对象是JavaScript中的一个内置对象,它提供了访问浏览器历史记录的方法和属性。使用history
对象,我们可以在浏览器历史记录中向前或向后导航,以及修改当前URL的状态。
history
对象的常用方法和属性如下:
history.back()
: 在浏览器历史记录中向后导航,相当于点击浏览器的后退按钮。history.forward()
: 在浏览器历史记录中向前导航,相当于点击浏览器的前进按钮。history.go(n)
: 在浏览器历史记录中导航到相对当前页面的指定位置,n
为正数表示向前导航,负数表示向后导航,0表示重新加载当前页面。history.length
: 返回浏览器历史记录中的页面数量。history.pushState(state, title, url)
: 添加一个新的历史记录条目,并修改当前URL的状态,但不导航到新的URL。history.replaceState(state, title, url)
: 修改当前历史记录条目的状态,但不导航到新的URL。