BOM(Browser Object Model)即浏览器对象模型,它提供了一些对象用来与浏览器进行交互,其核心对象是 window。
1. window
window 对象是浏览器的顶级对象,是 JS 访问浏览器窗口的一个接口。也是一个全局对象,定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法。
注:在调用的时候可以省略 window
window 对象的方法:alert()、prompt()、confirm()、setInterval()、setTimeout()、open()等。
window对象提供了两个定时器函数:setInterval() 和 setTimeout()。 具体的可以看看之前写的这篇文章《js中常用的两种定时器》
2. window 对象的常见事件
-
窗口加载事件
window.onload = function(){}; window.addEventListener("load",function(){});
window.onload 是窗口 (页面)加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS 文件等)。
注意:
有了 window.onload 就可以把 JS 代码写到页面元素的上方,因为 onload 是等页面内容全部加载完毕, 再去执行处理函数。
window.onload 传统注册事件方式 只能写一次,如果有多个,会以最后一个为准。如果使用 addEventListener 则没有限制
-
调整窗口大小事件
window.onresize = function(){} window.addEventListener("resize",function(){});
window.onresize 是调整窗口大小加载事件
注意:
- 只要窗口大小发生像素变化,就会触发这个事件。
- 经常利用这个事件完成响应式布局。window.innerWidth 当前屏幕的宽度
3. location 对象
用于获取或设置窗体的 URL,并且可以用于解析 URL
-
统一资源定位符 (Uniform Resource Locator, URL)
是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的 URL,它包含的信息指出文件的位置以及浏览器应该怎么处理它。
URL 的一般语法格式为:protocol://host[:port]/path/[?query]#fragment
protocol:通信协议 (常用的http、ftp等)
host: 主机(域名)
port: 端口号(可选,省略时使用协议默认端口,如http的默认端口为80)
path: 路径(是零或多个‘/’隔开的字符串)
qurey: 参数(以通过‘&’隔开的键值对形式展示)
fragment: 片段(#后面的内容,常见于链接锚点)
- location 对象的属性
属性 | 说明 |
---|---|
herf | 设置或者返回参数url |
host | 返回主机名(域名) |
port | 返回端口号 |
pathname | 返回路径 |
search | 返回参数 |
- location对象的常见方法
方法 | 说明 |
---|---|
assign() | 重定向页面(和href一样,可以跳转页面) |
replace() | 替换当前页面,不能操作页面前进、后退 |
reload() | 重载当前页面,相当于刷新按钮或者f5(如果参数为true,则为强制刷新 ctrl+f5) |
4. navigator 对象
navigator 对象包含有关浏览器的信息,它有很多属性,我们最常用的是 userAgent,该属性可以返回由客户端发送服务器的 user-agent 头部的值,可以判断用户使用什么终端打开页面
判断当前环境是移动端还是 PC 端
function isPc() {
var userAgentInfo = navigator.userAgent
var Agents = new Array(
'Android',
'iPhone',
'SymbianOS',
'Windows Phone',
'iPad',
'iPod'
)
var flag = true
flag = !Agents.some((ele) => {
return userAgentInfo.indexOf(ele) > 0
})
return flag
}
isPc()
5. history 对象
history 对象可以操作浏览器历史记录。该对象包含用户(在浏览器窗口中)访问过的 URL。( 一般在OA 办公系统中使用)
方法 | 说明 |
---|---|
history.back() | 后退功能,相当于浏览器的后退按钮 |
history.forword() | 前进功能,相当于浏览器的前进按钮 |
history.go(带参数) | 跳转到指定的页面,参数为指定页面的位置,如果为负数则表示后退。还可以是一个字符串类型的url |
6. screen对象
该对象用于获取有关客户端显示屏幕的一些信息
属性 | 说明 |
---|---|
height | 返回整个浏览器的高度 |
width | 返回整个浏览器的宽度 |
pixelDepth | 返回屏幕的分辨率 |