BOM
BOM是浏览器功能的核心,独立于网页内容。
Window
window.moveTo(): 移动到
window.moveBy(): 移动
window.innerWidth, window.innerHeight: 内宽高
window.outterWidth, window.outterHeight: 外宽高
window.scrollTo():滚到视窗x,y
window.open() =
(检测pop-up block:popup = window.open(), popup throw error
Location
location.assign(): 导向新的url
window.location = "url"同上
location.herf = "url"同上
Navigator
用来探知当前浏览器。
navigator.registerProtocolHandler(prototype like “mailto”, URL, name of app)
History
history.go(-1): backward, 等同于 history.back()。
history.go(1): forward,等同于 history.forward()。
history.length: 历史长度
维护Histroy状态
有时候你会需要更新当前的url,history.pushState(stateObject, “my title”, “xxx.html”),更新的event会反映到hashchange事件上。虽然你没有对server发送请求,但是state的改变会创造新的history记录,你现在可以按<-了。按下<-会触发popState事件,pop的内容即是push进的stateObject。
(event) => {let state = event.state}
以上可读取state。如果是第一页,state = null。
history.state:读取当前state
history.replaceState(): set。
state内部内容需能串行化,好例子是{foo:“bar”},坏例子是DOM元素。
注意,后端需要注意处理pushState创造的假url,以避免前端刷新的时候出现404。
Client Detection
Capability Detection浏览器功能检查
let hasNSPlugin = !!(navigator.plugin && navigator.plugin.length)
let hasDOM1 = !!(document.getElementById &&document.createElement )
User Agent Detection客户端检测
navigator.userAgent检测当前客户端,返回string。