【js】BOM基础
BOM
浏览器对象模型 - Browser Object ModelWeb浏览器
暴露的所有对象组成的表示模型,当浏览器分析文档时,它将创建一个对象集合
,定义文档并详细说明它如何显示。
浏览器创建的对象称为文档对象
,它是浏览器使用的更大的对象集合的一部分,此浏览器对象集合
统称为浏览器对象模型或BOM
- window
- location
- navigator
- screen
- history
核心
,其他对象都是该对象的子对象双重身份
- 被复用为ECMAScript中的
Global
对象 - 浏览器窗口的JavaScript接口
- 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 窗口
- 窗口关系
- 窗口位置和像素比
- 窗口大小
- 视口位置
- 导航与新窗口
- 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:物理像素和逻辑像素的缩放系数
- innerWidth:窗口内页面视口宽度
- innerHeight:窗口内页面视口高度
document.documentElement.clientWidth/clientHeight也表示视口大小
- outerWidth:窗口宽度
- outerHeight:窗口高度
console.log(innerHeight); //364 console.log(outerHeight); //1057
- resizeTo(x,y):设置窗口绝对大小
- resizeBy(x,y):相对原尺寸进行方法与缩小
同样仅在
IE
上有效果,其他浏览器支持,但可能处于保护模式
当页面宽高较大,可视区发生
滚动
时,获取当前可视区的位置
- 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
- 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()会被浏览器
拦截
,只允许用户手动添加窗口
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:域名前指定的密码
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-val2.2 location上的方法
实例对象可以使用get() set() delete()方法,相当于处理后返回一个map结构
- assign(url):修改浏览器地址,location的其他地址属性会重新解析
- replace(url):替换浏览器地址
replace与assign不同的是,replace后原页面不会保存到会话历史中,相当于直接
替换
- reload():重新加载页面
属性
- 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为单个震动或震动数组
- width:屏幕宽度
- height:高度
- availHeight:屏幕高度 - 系统组件高度
- availWidth:屏幕宽度 - 系统组件宽度
- availLeft:无系统组件占用的屏幕最左侧像素
- availTop:最顶部
- colorDepth:屏幕颜色的位数
- pixelDepth:屏幕位深
- orientation:屏幕朝向
5.1 基本属性与方法
- length:历史记录数量
- back():回退一步
- forward():前进一步
- go(n):前进/后退|n|步,或指定地址,导航至最近的该地址
- pushState(state,title,url):向历史中添加一个状态
- replaceState(state,title,url):替换当前历史记录
pushState()创建的"假"URL背后都对应这服务器上一个真实的物理URL,否则单击刷新会导致404错误
所有单页应用程序框架都必须通过服务器或客户端的某些配置解决这个问题
推荐阅读
- 宽容谁
- 我要做大厨
- 增长黑客的海盗法则
- 画画吗()
- 2019-02-13——今天谈梦想()
- 远去的风筝
- 三十年后的广场舞大爷
- 叙述作文
- 20190302|20190302 复盘翻盘
- 学无止境,人生还很长