js之BOM

思维导图

窗口关系

top表示最上层的一个窗口
parent表示当前窗口的父窗口
self表示自身，即window

窗口位置

使用moveTo或者moveBy，其中moveTo指定绝对位置，moveBy指定相对位置(单位为像素)
像素涉及到一个设备像素比devicePixelRatio，即将物理分辨转为逻辑分辨率

窗口大小

浏览器窗口大小使用outerWidth,outerHeight，如果要除去边框，工具栏的窗口大小使用innerWidth, innerHeight
页面视口的窗口的宽高使用document.documentElement.clientWidth和document.documentElement.clientHeight或者document.body.clientWidth和document.body.clientHeight
调整窗口大小使用resizeTo或者resizeBy，其中resizeTo指定新窗口的宽度和高度，resizeBy指定宽度和高度要缩放多少

视口位置

用于滚动视图情况下，使用window.pageXoffset/window.scrollX和window.pageYoffset/window.scrollY
修改视口位置 使用scrollTo或者scrollBy

新建窗口

使用window.open，其中第一个参数是url,第二个参数是窗口名，第三个参数用于设置窗口属性（用逗号分隔）
支持的属性有

属性名	值类型	说明
fullscreen	yes或者no	窗口是否最大化
height	number	窗口高度
width	number	窗口宽度
location	yes或者no	是否显示地址栏
Menubar	yes或者no	是否显示菜单栏
resizable	yes或者no	是否可以改变窗口大小
scrollable	yes或者no	是否可以滚动
status	yes或者no	是否显示状态栏
toolbar	yes或者no	是否显示工具栏
top	number	y轴坐标
left	number	x轴坐标

其会返回一个指向窗口的引用，其有属性opener表示创建新窗口的创建者
对于有弹窗屏蔽程序时，其返回的窗口引用为null或者会抛出异常

定时器

setTimeout和setInterval的第一个参数为回调函数，第二个参数为超时时间，单位为毫秒
返回值为定时器id，通过clearTimeout或者clearInterval来取消定时任务

对话框

confirm为确认对话框，用于看用户选择是或者否
prompt为提示对话框，用来获取输入信息

location

不仅是DOM的入口 ，也是BOM的一部分，也保存URL解析后的信息

属性	说明
hash	包含一个 “#” 后跟位置 URL 的片段标识符
host	服务器名及端口号
hostname	服务器名
port	端口号
href	一个包含了完整 URL 的 USVString 值
pathname	url中的路径和文件名
search	以问号开头的字符串
protocol	http
username	用户名
password	密码
origin	url的源地址

reload方法：重新加载URL，默认是从缓存，传true时表示忽略缓存，从服务器加载

navigator

可以用来插件检测
参考navigator
客户端检测时，不能仅仅判断属性是否存在，有时还得使用typeof判断属性的类型
硬件相关属性有

属性	说明
oscpu	操作系统/系统架构相关信息
vendor	开发商信息
platform	操作系统信息
hardwareConcurrency	逻辑处理器核心数量
deviceMemory	设备系统内存大小
maxTouchPoints	最大触点数目

电池相关
使用navigator.getBattery()方法返回一个期约，解决值为BatteryManager对象

属性	说明
charging	是否在充电
charginTime	离充满还需要多长时间，单位秒
dischargingTime	离耗尽还要多长时间，单位秒
level	电量百分比，浮点数

对应的事件属性为

• onchargingchange
• onchargingtimechange
• ondischargingtimechange
• onlevelchange

在使用window.addEventListener时，事件名前的on需要去掉

连接相关的属性有

属性名	说明
downlink	下行带宽，整数，单位为Mbit/s
downlinkMax	最大下行带宽，整数，单位为Mbit/s
effectiveType	表示连接速度和质量， 字符串枚举值，支持的值有slow-2g/2g/3g/4g
rtti	往返时间，单位为毫秒
type	网络连接技术，字符串枚举值，支持的值有bluetooth/cellular/ethernet/none/mixed/other/unknown/wifi/wimax
saveData	是否启用了节流，布尔值
onchange	事件处理程序，表示连接状态变化时触发，在使用window.addEventListener时，名称为change

地理位置相关属性有
使用navigator.geolocation,位置信息获取使用navigator.geolocation.getCurrentPosition()方法，返回position对象
position对象中包含一个坐标信息的对象Coordinates，其属性有

属性名	说明
altitude	海拔高度
altitudeAccuracy	海拔高度精度
longitude	纬度
latitude	纬度
accuracy	精度
speed	每秒移动速度
heading	朝向，相对于北方向移动的角度

screen

属性有

属性名	说明
availHeight	去除系统组件后的高度
availWidth	去除系统组件后的宽度
availTop	去除系统组件后的最顶端像素
availLeft	去除系统组件后的最左端像素
height	屏幕像素高度
width	屏幕像素宽度
top	屏幕最顶端像素
left	屏幕最左端像素
colorDepth	屏幕颜色位数，多数是32
pixelDepth	屏幕位深

history

控制历史记录使用go,back,forward
go传正数时表示前进，负数表示后退
也可以使用pushstate，replacestate和popstate，popstate时，事件对象有state属性，即pushstate传递时传的