【js】BOM基础 javascriptbom

BOM 浏览器对象模型 - Browser Object Model
Web浏览器暴露的所有对象组成的表示模型，当浏览器分析文档时，它将创建一个对象集合，定义文档并详细说明它如何显示。

浏览器创建的对象称为 文档对象，它是浏览器使用的更大的对象集合的一部分，此浏览器 对象集合统称为浏览器对象模型或BOM

window
location
navigator
screen
history

1 window对象顶层对象 - 核心，其他对象都是该对象的子对象
双重身份

被复用为ECMAScript中的Global对象
浏览器窗口的JavaScript接口

Global
窗口
定时器
系统对话框

1.1 Global作用域
通过var声明的所有全局变量和函数都会成为window对象的属性和方法

var a = 10; var showA = () => { console.log(this.a); } console.log(window.a); //10 window.showA() //10let b = 20; let showB = () => { console.log(b); } console.log(window.b); //undefined window.showB() //Uncaught TypeError

1.2 窗口

窗口关系
窗口位置和像素比
窗口大小
视口位置
导航与新窗口

1.2.1 窗口关系

top：顶层窗口，指向最外层窗口的window
parent：父窗口window
self：当前窗口，当前window

//单窗口 window === top //true window === parent //true window === self //true

1.2.2 窗口位置和像素比
screenLeft：窗口相对于屏幕左侧的位置
screenTop：相对于顶部的位置
moveTo(x,y)：移动至绝对坐标
moveBy(x,y)：相对当前位置的偏移

//半屏 console.log(screenLeft); //953 console.log(screenTop); //30

有与moveTo()与moveBy()仅在 IE上有效果，不再举例
devicePixelRatio：物理像素和逻辑像素的缩放系数

1.2.3 窗口大小

innerWidth：窗口内页面视口宽度
innerHeight：窗口内页面视口高度

document.documentElement.clientWidth/clientHeight也表示视口大小
outerWidth：窗口宽度
outerHeight：窗口高度

console.log(innerHeight); //364 console.log(outerHeight); //1057
resizeTo(x,y)：设置窗口绝对大小
resizeBy(x,y)：相对原尺寸进行方法与缩小

同样仅在 IE上有效果，其他浏览器支持，但可能处于保护模式

1.2.4 视口大小上面介绍了两种获取可视区宽高的方式
当页面宽高较大，可视区发生滚动时，获取当前可视区的位置

pageXOffset/scrollX：可视区相对页面水平滚动的距离 - 前者已弃用
pageYOffet/scrollY：垂直滚动的距离 - 前者已弃用

console.log(pageXOffset); //200 console.log(scrollX); //200 console.log(pageYOffset === scrollY); //true
scroll(x,y)：滚动至绝对坐标
scrollTo(x,y)：滚动至绝对坐标
scrollBy(x,y)：相对当前位置的偏移量

参数可以是一个选项 对象，对滚动行为进行具体描述
//平滑滚动到顶部 scrollTo({ left: 0, top: 0, behavior: 'smooth' }) //向下滚动一页 scrollBy({ left: 0, top: innerHeight, behavior: 'smooth' })

【【js】BOM基础】behavior：
smooth：平滑滚动
instant：瞬间滚动
auto：instant

1.2.5 导航与新窗口

open(url,name,fetures)：用指定名称将指定的资源加载到浏览器上下文，无名称打开新窗口
name
- 打开指定名称的窗口
- '_self','_blank'
- '_parent'在parent框架打开，无则等价于'_self'
- '_top'进入顶层浏览上下文，无则等价于'_self'
fetures
- height,width,top,left：新窗口的大小与位置
- fullscreen：是否窗口最大化 IE
- location：是否显示地址栏
- Menubar：是否显示菜单栏
- toolbar：是否显示工具栏
- status：是否显示状态栏
- resizable：是否可以拖动改变新窗口大小
- scrollbars：是否在内容过长时滚动
布尔类型默认为 no
open返回当前窗口的window，opener返回打开该窗口的window
close()：关闭窗口

//在新窗口指点大小与位置打开资源 const newWin = open( 'http://www.bilibili.com', '_blank', 'height=400,width=400,top=0,left=0,resizable=yes' ) //关闭窗口 newWin.close() newWin.closed //true

加载阶段的open()会被浏览器 拦截，只允许用户手动添加窗口

1.2 定时器
setTimeout(func,delay,arg1...)：在指定时间后执行
参数：arg为func回调的默认参数
返回值，返回定时器ID

//2000ms后执行 let timer = setTimeout((...a) => { console.log(a); }, 2000, 'a', 'b'); //关闭定时器 clearTimeout(timer)

setInterval(func,delay,arg1...)：每隔一段时间执行一次
参数与返回值与setTimeout相同，通过clearInterval取消

间隔时间：每隔一段时间添加一个任务到执行队列中，浏览器不管何时开始要执行多久，在下一个时间间隔会再添加一个任务到执行队列，不管前面的任务是否执行
这意味着可能会出现定时器添加了多个任务，最终同时执行没有间隔的效果

1.3 系统对话框

alert()：警告窗
confirm()：确认窗 - 返回布尔值
prompt()：提示对话框 - 返回字符串或null
find()：查找页面内容 - 返回布尔值
print()：显示打印对话框

一般情况下我们会自己写对话框，在样式与功能上更完善

2 location对象 window与document公有属性：提供当前窗口中加载文档的信息，以及通常的导航功能

window.location === document.location //true

href：完整URL
origin：URL源地址。只读
protocol：协议名
host：服务器名 + 端口号
hostnamr：服务器名
port：端口号
pathname：路径或文件名
hash：散列值，#后的值
search：query参数
username：域名前指定的用户名
password：域名前指定的密码

2.1 查询字符串
location.search()返回query参数，需要对其拆分保存

//使用字符串拆分与遍历的方式 function getQueryStringArgs() { let qs = location.search.length > 0 ? location.search.slice(1) : ''; const args = {}; for (const item of qs.split('&').map(i => i.split('='))) { let key = decodeURIComponent(item[0]) let val = decodeURIComponent(item[1]) if (key.length) args[key] = val } return args }

decodeURIComponet函数为解码函数，将编码的URI的转义序列转换为原字符

function getQueryStringArgs() { let qs = new URLSearchParams(location.search) const args = {}; for (const item of qs) { let key = decodeURIComponent(item[0]) let val = decodeURIComponent(item[1]) if (key.length) args[key] = val } return args } console.log(getQueryStringArgs());

new URLSearchParams(query) 返回一个可迭代对象，以数据形式存放key-val
实例对象可以使用get() set() delete()方法，相当于处理后返回一个map结构

2.2 location上的方法

assign(url)：修改浏览器地址，location的其他地址属性会重新解析
replace(url)：替换浏览器地址

replace与assign不同的是，replace后原页面不会保存到会话历史中，相当于直接 替换
reload()：重新加载页面

3 navigator对象用户代理的状态和标识，允许脚本查询它和注册自己进行一些活动
属性

connection：设备网络连接信息。只读
onLine：是否联网
deviceMemory：设备内存
hardwareConcurrency：逻辑处理器核心数，浏览器可并行最大工作线程数量
maxTouchPoints：最大关联触点数量
language[s]：浏览器主语言与偏好语言数组
mediaDevices：可用媒体设备
plugins：插件数组
userAgent：用户代理字符串
webdriver：浏览器是否被自动程序控制
storage：暴露相关API
serviceWorker：暴露相关API
permissions：暴露相关API
mediaCapabilities：暴露相关API
locks：暴露相关API
credentials：暴露相关API
geolocation：暴露相关API - 当前设备地理位置

方法

registerProtocolHandler(scheme, url)

web站点为自身注册 协议
requestMediaKeySystemAccess(keySystem,supportedConfigurations)

返回一个promise，访问特定媒体的密钥系统，该系统又可创建解密媒体流的密钥
sendBeacon(url, data)

向指定地址异步发送数据，只是简单字符串则向本地址与字符串拼接后的地址发送数据，成功返回true
share(data) data:url text title files

返回promise，返回当前平台的共享机制，数据格式不正确promise为拒绝状态
vibrate(pattern)

触发设备震动，不支持返回false
pattern为单个震动或震动数组