BOM拾遗补缺

BOM

浏览器对象模型 Browser Object Model

window对象

视口大小，视口位置

视口位置

// 整个窗口的大小
window.outerWidth
window.outerHeight
// 视口大小
window.innerWidth
window.innerHeight
// 视口中页面大小（不包含auto的滚动条）
document.documentElement.clientWidth
document.documentElement.clientHeight

滚动视口

window.scrollTo(x, y)
window.scrollTo({
  left: 0,
  top: 100,
  // behavior属性设置是否平滑滚动
  behavior: 'auto'  // 'smooth'
})

alert confirm promt

alert() 弹出一个警告框
confirm() 弹出一个确认框，用户选择后返回布尔值
prompt() 弹出一个表单框，返回用户输入的信息

location对象

location既是window的属性，也是document的属性

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

location.hash
location.host
location.hostname
location.href
location.pathname
location.search
location.port
location.origin
location.username
location.password

查询字符串

URLSearchParams

// ?lang=zh_cn
let qs = new URLSearchParams(location.search)
qs.toString()
qs.has('lang')  // true
qs.get('lang')  // zh_cn
qs.set('page', '3')
qs.delete('page')

for(let param of qs) {
  console.log(param)
}

操作地址

跳转到新地址

let url = '/user/1'
// 以下三种结果相同
location = url
location.assign(url)
location.href = url
// location下面的大多属性都可以直接修改，除location.hash之外，修改其他属性都会导致页面重新加载URL

修改url且不加入浏览历史记录

location.replace(url)

重载页面

location.reload() // 从缓存中加载
location.reload(true) // 从服务器端加载

navigator对象

navigator对象用来标注浏览器，通常用于确定浏览器的类型

// 列举几个常用的
appName // 浏览器全民
appVersion  // 浏览器版本
cookieEnable  // 是否启用cookie
language  // 浏览器主语言
vibrate() // 触发设备震动
userAgent // 浏览器的用户代理字符串
mediaDevice // 可用媒体设备

screen对象

用以访问当前显示器的信息

history对象

history对象表示当前窗口首次使用以来用户的单行历史记录
出于安全考虑，这个对象不会暴露用户访问过的url，但是可以通过他在不知道实际url的情况下前进和后退

如果URL发生变化，则会在历史记录中生成一条新条目，这包括URL的散列值（因此把location.hash设置为一个新的值，会在历史记录中增加一条记录）。这个行为常被单页应用程序框架用来模拟前进和后退。这样做不会因导航而触发页面刷新

历史状态管理---hashchange事件

// hashchange事件会在页面url的散列变化时被触发，开发者可以在此时进行某些操作。而状态管理API则可以让开发者改变浏览器URL而不刷新页面  
// 可以使用history.pushState()方法
// 这个方法接收三个参数，state对象，一个新状态的标题，一个相对url（可选）
// 第二个参数当前并未实现使用，所以可以传一个空字符或者短标题
let stateObject = {foo: 'bar'}
history.pushState(stateObject, 'title', 'baz.html')
// pushState()之后，状态信息就会被推倒历史记录中，浏览器地址栏也会改变，以反映新的相对url
// 除了这些变化，location.href返回的时地址栏的内容，浏览器页不会向服务器发送请求
// 第一个参数应该包含正确初始化页面所需要的信息，为了防止滥用对象大小被控制在500kb到1mb以内

因为pushState()会创建新的历史记录，所以也会相应的启用后退按钮，此时单机后退按钮就会触发window对象上的popstate事件
popstate事件的事件对象有个state属性，其中包含了通过pushState()第一个参数传递的state对象

window.addEventListener('popstate', (event) => {
  let state = event.state
  if(state) {// 第一个页面加载时是null
    processState(state)
  }
})
// 基于这个状态，应该把页面重置为状态对象所表示的状态

可以通过history.state来获取当前对象的状态，也可以使用replaceState()并传入pushState()相同的前两个参数来更新状态，更新状态不会创建新的历史记录，只会覆盖当前状态：

history.replaceState({newFoo: 'newBar'}, 'new title')

传给pushState和replaceState()的state对象应该只包含可以被序列化的信息，DOM元素之类并不适合放到状态对象里保存
HTML5状态管理时，要确保通过pushState()创建的每个‘假’URL背后都对应服务器上的一个真实物理URL。否则点击刷新将会导致404问题。所有SPA框架都必须通过服务器或客户端的某些配置解决这个问题