大家好,我是一碗周,一个不想被喝(内卷)的前端。如果写的文章有幸可以得到你的青睐,万分有幸~
这是【从头学前端】系列文章的第四十六篇-《浅谈BOM》
写在前面
BOM的全称为Browser Object Model,被翻译为浏览器对象模型,它是由一系列对象构成,这些对象可以简单理解为是由各个有浏览器所提供的。BOM是用于实现Web开发与浏览器之间互相操作的基础。
BOM主要包含5个基础对象,如下所示:
- window:表示浏览器实例
- location:加载文档的信息和常用导航功能实例
- navigator:客户端标识和信息的对象实例
- screen:客户端显示器信息
- history:当前窗口建立以来的导航历史记录
Window对象
Window对象是什么
BOM中最核心的对象就是Window对象,该对象表示运行HTML页面的浏览器窗口。
在浏览器环境中,Window对象具有双重角色。该对象既是允许JavaScript逻辑访问就浏览器的一个对象,又是ECMAScript规范中的Global全局对象。
这就说明了,在浏览器环境中运行JavaScript逻辑时,在全局作用域中定义对象、变量和函数都是Window对象的属性和方法。
可以通过Window对象访问全局对象的属性和方法,例如NaN
,undefined
和parseInt()
方法等。
示例代码如下所示:
<body>
<script>
var v = 100;
function name() {
console.log('我是函数')
}
console.log(window.v) // 100
window.name() // 我是函数
</script>
</body>
Window对象的属性
Window对象的属性属性较多,包含了浏览器窗口的基本信息、也包含了一些复杂的信息。我们来介绍一下这其中比较常见的属性:
top
属性始终指向最外层的窗口,及浏览器窗口本身parent
属性始终指向当前窗口的父窗口,如果当前窗口就是最外层窗口,则top
等于parent
self
属性始终指向自身innerWidth
和innerHight
属性返回当期浏览器窗口的可视宽度和高度outterWidth
和outterHeight
属性回当期浏览器窗口的整个宽度和高度
Window对象的方法
alert(message)
:显示带有一段消息和一个确认按钮的警告框。confirm(message)
:显示带有一段消息以及确认按钮和取消按钮的对话框。prompt(text,defaultText)
:显示可提示用户输入的对话框。用户如果点击取消按钮则返回null
,否则返回对应的文本内容close()
:用于关闭浏览器窗口open()
:请参阅location.href与window.open()的用法与区别
定时器
定时器的具体方法由Window对象提供,共有以下两种定时器:
- 延迟执行:指的是指定代码在指定时间后被执行,而不是立刻被执行。
- 周期执行:指的是指定程序代码在执行时间为间隔,重复被执行。
延迟执行
设置延迟执行通过setTimeout()
方法,该方法的会在定时器结束之后,执行一个函数。语法结构如下:
var timeoutID = setTimeout(callback[, delay, param1, param2, ...])
上面的参数中,callback
表示定时器结束执行的函数;delay
表示延迟的时间,这个参数是可选的,默认为0;后面的参数均为可选参数,表示定时器结束后执行函数的参数。
这个函数的回调函数是一个正整数,表示定时器的编号,将这个编号传递给clearTimeout()
来取消定时器。
周期执行
周期执行通过setInterval()
方法,该方法的语法结构同setTimeout()
一致,不同的是setTimeout()
执行一遍就不会在执行了,而setInterval()
只要是不出现异常且不调用clearInterval()
方法结束周期执行则会一直执行下去。
示例代码如下所示:
<body>
<script>
var count = 0
var id = setInterval(() => {
console.log('我被重复' + ++count + '执行了')
if (count === 10) {
clearInterval(id)
console.log('我的执行结束了')
}
}, 1000);
</script>
</body>
上面的代码中,console.log('我被重复' + ++count + '执行了')
将会被执行10次,在10次的时候进入if
语句块,打印我的执行结束了
从而结束执行。
Navigator对象
Navigator对象包含了一些有关浏览器状态的信息。可以通过window.navigator
属性得到Navigator对象。
Navigator对象提供了一系列常用属性,获取当前浏览器的信息
属性名称 | 描述 |
---|---|
appCodeName | 浏览器的代码名 |
appName | 浏览器的名称 |
appVersion | 浏览器的平台和版本信息 |
platform | 运行浏览器的操作平台 |
History对象
History对象包含用户在浏览器中访问过URL。
History对象提供的属性和方法如下表所示
属性/方法 | 描述 |
---|---|
length 属性 | 获取用户在浏览器中访问网址的数量。 |
forward() 方法 | 实现跳转下一个页面,作用和浏览器的前进按钮一样。 |
back() 方法 | 实现跳转到上一个页面,作用和浏览器的回退按钮一样 |
go() 方法 | 实现跳转到指定的页面。如果为正数表示前进,为负数表示后退。 |
Location对象
Location对象是什么
Location对象包含了浏览器的地址栏的信息,该对象主要用于获取和设置地址。
Location对象很特别,因为该对象既是Window对象的属性,又是Document对象的属性。
console.log(window.location == document.location) // true
Location对象的属性
Location对象不仅存储了地址栏中的信息,该提供了解析功能。可以通过不同的Location对象的属性访问不同的地址栏中的信息。
具体属性如下表所示
属性名称 | 描述 |
---|---|
host | 返回服务器名称和端口号 |
hostname | 返回服务器名称 |
href | 返回当前价值页面的完整URL |
pathname | 返回当前URL中的目录和文件名 |
port | 返回当前URL中的端口号 |
protocol | 返回页面使用的网络协议 |
Location对象的方法
方法名称 | 描述 |
---|---|
assign() | 载入一个新的文档,作用于直接修改Location相同 |
reload() | 重新加载当前文件,作用和刷新按钮一样。参数为true 时,则会强制清空缓存刷新页面 |
replace() | 用新的文档替换当前文档(不会生产历史记录,不能使用回退按钮回退) |
写在最后
你如果看到这里,我感到很荣幸,如果你喜欢这篇文章,你可以为这篇文章点上一个小赞;你如果喜欢这个专栏,我会一直更新到百篇以上,可以点一下后面的链接从头学前端 - 一碗周的专栏进入之后给个关注。
最后也可以给我点个关注,万分荣庆。
往期推荐