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框架都必須經過服務器或客戶端的某些配置解決這個問題