关于javascript:BOM拾遗补缺

9次阅读

共计 2502 个字符，预计需要花费 7 分钟才能阅读完成。

浏览器对象模型 Browser Object Model

视口地位

// 整个窗口的大小
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() 弹出一个确认框，用户抉择后返回布尔值
prompt() 弹出一个表单框，返回用户输出的信息

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 对象用来标注浏览器，通常用于确定浏览器的类型

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

用以拜访以后显示器的信息

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 框架都必须通过服务器或客户端的某些配置解决这个问题

正文完