BOM
BOM概述
什么是 BOM
BOM
是Browser Object Model
,浏览器对象模型。主要处理浏览器窗口和框架,不过通常浏览器特定的JS
扩展都被看做BOM
的一部分。BOM
是各个浏览器厂商根据DOM
在各自浏览器上的实现,表现为不同浏览器定义有差别,实现方式不同
JS
是通过访问 BOM
对象来访问、控制、修改客户端(浏览器)
浏览器对象模型(BOM)可以使我们通过 JS 来操作浏览器,在 BOM 中为我们提供了一组对象,用来完成对浏览器的操作
常见的 BOM 对象如下(下面会详细介绍):
Window
:代表的是 整个浏览器的窗口,同时 window 也是网页中的全局对象Navigator
:代表的是 当前浏览器的信息,通过该对象可以来识别不同的浏览器Location
:代表的是 当前浏览器的地址栏信息,通过该对象可以获取地址栏信息,或者操作浏览器跳转页面History
:代表的是 浏览器的历史记录,可以通过该对象来操作浏览器的历史记录,由于隐私原因,该对象不能获取到具体的历史记录,只能操作浏览器向前或向后翻页,而且该操作只在当次访问时有效Screen
:代表的是 用户的屏幕的信息,通过该对象可以获取到用户的显示器的相关的信息
由于 BOM 的 window 包含 document,因此可以直接使用 window 对象的 document 属性,通过 document 属性就可以访问、检索、修改 XHTML 文档内容与结构。因为 document 对象又是 DOM 的根节点
BOM对象的详细使用BOM 对象在浏览器中都是作为 window 对象的属性保存的,可以通过 window 对象来使用,也可以直接使用
Window对象
弹出框
分为警示框、确认框、提示框
警示框
如果要确保信息传递给用户,通常会使用警告框。当警告框弹出时,用户将需要单击“确定”来继续
使用alert()
需要注意的是:
alert()
会阻塞进程alert(param)
中param
只能是number
、string
类型或者它们组成的数组
语法
1 | window.alert("内容") |
确认框
如果您希望用户验证或接受某个东西,则通常使用“确认”框,用户单击“确定”,该框返回 true。如果用户单击“取消”,该框返回 false
语法
1 | window.confirm("内容"); |
提示框
如果您希望用户在进入页面前输入值,通常会使用提示框,如果用户单击“确定”,该框返回输入值,如果用户单击“取消”,该框返回 NULL
语法
1 | window.prompt("提示内容","提示框的内容"); |
1 |
|
定时事件
window 对象允许以指定的时间间隔执行代码,这些时间间隔称为 定时事件
方法 | 作用 |
---|---|
setTimeout( ) | 在指定的毫秒数后调用函数或执行一段代码 |
setInterval( ) | 按照指定的周期(以毫秒计)来调用函数或执行一段代码 |
clearTimeout( ) | 取消由 setTimeout( ) 方法设置的定时器 |
clearInterval( ) | 取消由 setInterval( ) 设置的定时器 |
超时定时器
在等待指定的毫秒数后执行函数,在给定的时间间隔执行一次
语法
1 | window.setTimeout(funtion,毫秒数) |
属性
- 1.是要执行的函数
- 2.指示执行之前的毫秒数
循环定时器
等同于 setTimeout(),但持续重复执行该函数,在每个给定的时间间隔重复给定的函数
语法
1 | window.setInterval(function,毫秒数); |
属性
- 1.要执行的函数
- 2.每个执行之间的时间间隔的长度
1 |
|
常用窗口属性
两个属性可用用于确定浏览器窗口的尺寸
这两个属性都以像素返回尺寸:
window.innerHeight
- 浏览器窗口的内高度(以像素计)window.innerWidth
- 浏览器窗口的内宽度(以像素计)
浏览器窗口(浏览器视口)不包括工具栏和滚动条
1 |
|
其他window方法
打开新窗口
语法
1 | window.open(URL,name,specs,replace); |
关闭当前窗口
语法
1 | window.close() |
移动当前窗口
语法
1 | window.moveTo(x,y) |
调整当前窗口的大小
语法
1 | window.resizeTo(width,height) |
1 |
|
Navigator对象
通过该对象可以来识别不同的浏览器,由于历史原因,该对象中的大部分属性都已经不能帮助我们识别浏览器了,也就是不能用了
一般我们只会使用 navigator.userAgent
来判断浏览器的信息,navigator.userAgent
是一个字符串,这个字符串中包含有用来描述浏览器信息的内容,不同的浏览器会有不同的 navigator.userAgent
1 |
|
属性 | 作用 |
---|---|
navigator.appCodeName | 浏览器的内部名称,也就是代号 |
navigator.appName | 浏览器的完整名称 |
navigator.appVersion | 浏览器的平台和版本信息 |
navigator.cookieEnabled | 浏览器中是否启用Cookie的布尔值 |
navigator.platform | 运行浏览器的操作系统平台 |
navigator.userAgent | 客户端发送到服务器的User-Agent头部的值 |
navigator.language | 客户端发送到服务器的User-Agent头部值的语言 |
警告
来自 navigator 对象的信息具有误导性,不应该被用于检测浏览器版本
- navigator 数据可被浏览器使用者更改
- 一些浏览器对测试站点会识别错误
- 浏览器无法报告晚于浏览器发布的新操作系统
注意:在IE11中已经将微软和IE相关的标识都已经去除了,所以我们基本已经不能通过UserAgent来识别一个浏览器是否是IE了,如果通过UserAgent不能判断,还可以通过一些浏览器中特有的对象,来判断浏览器的信息,比如:ActiveXObject
Location对象
封装了浏览器的地址栏的信息,如果直接打印 location,则可以获取到地址栏的信息(当前页面的完整路径)
常用属性
属性 | 作用 |
---|---|
location | location对象 ,可以改值 |
location.href | 当前地址的全路径地址,可以改值 |
location.origin | 当前地址的来源 |
location.protocol | 当前地址的协议 |
location.port | 当前地址的端口号 |
location.hostname | 当前地址的主机名 |
location.host | 当前地址的主机 |
location.pathname | 当前地址的路径部分 |
location.search | 当前地址的?后边的参数部分 |
常用方法
assign( )
定义:用来跳转到其它的页面,作用和直接修改location一样
1 | location.assign("https://chen-ruo.top") |
reload( )
定义:用于重新加载当前页面,作用和刷新按钮一样,如果在方法中传递一个true,作为参数,则会强制清空缓存刷新页面
1 | location.reload(true) |
replace( )
定义:可以使用一个新的页面替换当前页面,调用完毕也会跳转页面,它不会生成历史记录,不能使用回退按钮回退
1 | location.replace("https://chen-ruo.top") |
History对象
用来操作浏览器向前或向后翻页
常用属性
1 | console.log(history); //输出history对象 |
常用方法
back()
可以回退到上一个页面,作用和浏览器的回退按钮一样
1 | history.back() |
forward()
可以跳转到下一个页面,作用和浏览器的前进按钮一样
1 | history.forward() |
go()
可以用来跳转到指定的页面,它需要一个整数作为参数
- 1:表示向前跳转一个页面,相当于forward()
- 2:表示向前跳转两个页面
- -1:表示向后跳转一个页面,相当于back()
- -2:表示向后跳转两个页面
1 | history.go(1) |
Screen对象
有关客户端显示屏幕的信息
每个 Window 对象的 screen 属性都引用一个 Screen 对象。
Screen 对象中存放着有关显示浏览器屏幕的信息
JavaScript 程序将利用这些信息来优化它们的输出,以达到用户的显示要求
属性 | 作用 |
---|---|
availHeight | 返回显示屏幕的高度 (除 Windows 任务栏之外) |
availWidth | 返回显示屏幕的宽度 (除 Windows 任务栏之外) |
height | 返回显示屏幕的高度 |
width | 返回显示器屏幕的宽度 |
bufferDepth | 设置或返回调色板的比特深度 |
colorDepth | 返回目标设备或缓冲器上的调色板的比特深度 |
deviceXDPI | 返回显示屏幕的每英寸水平点数 |
deviceYDPI | 返回显示屏幕的每英寸垂直点数 |
logicalXDPI | 返回显示屏幕每英寸的水平方向的常规点数 |
logicalYDPI | 返回显示屏幕每英寸的垂直方向的常规点数 |
pixelDepth | 返回显示屏幕的颜色分辨率(比特每像素) |
updateInterval | 设置或返回屏幕的刷新率 |
fontSmoothingEnabled | 返回用户是否在显示控制面板中启用了字体平滑 |
本地存储
本地存储方法分为 cookie
和 storage
cookie
读取cookie
示例代码
1 | function getCookie( name ){ |
写cookie
示例代码
1 | function setCookie(name,value){ |
删除cookie
示例代码
1 | function delCookie(name){ |
storage
相比cookie
,更推荐用storage
来做本地存储
storage,分为 sessionStorage
和 localStorage
sessionStorage
特点:
- 生命周期为关闭浏览器窗口
- 在同一个窗口(页面)下数据可以共享
- 以键值对的形式存储使用
方法 | 作用 |
---|---|
sessionStorage.setItem(key, value) | 存储数据 |
sessionStorage.getItem(key) | 获取数据 |
sessionStorage.removeItem(key) | 删除数据 |
sessionStorage.clear( ) | 删除所有数据 |
localStorage
特点:
- 永久有效,即使关闭页面也会存在。除非手动删除
- 可以多窗口(页面)共享,即同一浏览器可以共享
- 以键值对的形式存储使用
方法 | 作用 |
---|---|
localStorage.setItem(key, value) | 存储数据 |
localStorage.getItem(key) | 获取数据 |
localStorage.removeItem(key) | 删除数据 |
localStorage.clear( ) | 删除所有数据 |
区别
共同点
cookie
,sessionStorage
,localStorage
都是在客户端保存数据的,并且都是key-value类型
不同点
生命周期
cookie
如果不设置有效期,那么就是临时存储,浏览器关闭,cookie
也就失效了。如果设置了有效期,那么有效期到了,就自动消失了
sessionStorage
仅在当前会话下有效
localStorage
的生命周期是永久的,关闭页面或浏览器之后 localStorage
中的数据也不会消失。除非主动删除数据,否则数据永远不会消失
大小限制
cookie
大小限制在4KB
localstorage
和 sessionStorage
的大小限制为5M
安全性
localstorage
和 sessionStorage
不会随着HTTP header发送到服务器端,安全性相对于 cookie
来说比较高一些
便捷性
localstorage
和 sessionStorage
相关的一些操作数据的方法的确比 cookie
便捷很多