BOM

浏览器对象模型 Browser Object Model

window对象

视口大小，视口地位

视口地位

// 整个窗口的大小window.outerWidthwindow.outerHeight// 视口大小window.innerWidthwindow.innerHeight// 视口中页面大小（不蕴含auto的滚动条）document.documentElement.clientWidthdocument.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 // truelocation.hashlocation.hostlocation.hostnamelocation.hreflocation.pathnamelocation.searchlocation.portlocation.originlocation.usernamelocation.password

查问字符串

URLSearchParams

// ?lang=zh_cnlet qs = new URLSearchParams(location.search)qs.toString()qs.has('lang')  // trueqs.get('lang')  // zh_cnqs.set('page', '3')qs.delete('page')for(let param of qs) {  console.log(param)}

操作地址

跳转到新地址

let url = '/user/1'// 以下三种后果雷同location = urllocation.assign(url)location.href = url// location上面的大多属性都能够间接批改，除location.hash之外，批改其余属性都会导致页面从新加载URL

批改url且不退出浏览历史记录

location.replace(url)

重载页面

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

navigator对象

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

// 列举几个罕用的appName // 浏览器全民appVersion  // 浏览器版本cookieEnable  // 是否启用cookielanguage  // 浏览器主语言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框架都必须通过服务器或客户端的某些配置解决这个问题