BOM是什麼？有什麼作用？

BOM（Browser Object Model）：瀏覽器物件模型，是JS的三大組成部分之一，簡單理解就是使JS有能力操作和訪問客戶端（瀏覽器）。

Window物件

• 一個html文件（一個瀏覽器標籤頁）對應一個window物件
• window物件是BOM的頂層物件，其他物件均是window物件的屬性（子物件）
• ECMAScript中規定的全域性物件，所有全域性變數和方法都將被解析成window物件的屬性
• window是BOM物件而非js物件

常用方法

• alert()

• confirm("")　　　　　　　　　　　選擇框

• prompt()　　　　　　　　　　　輸入內容提示框

  • 點選確認返回輸入值，點選取消返回null

• open(url,name,parameters)　　開啟一個新視窗或查詢已命名的視窗

  • url(string)：子視窗路徑
  • name(string)：子視窗名稱，方便引用
  • parameters(string):引數逗號隔開
    • width、height
    • left、top：視窗位置
    • toolbar：是否顯示工具欄
    • menubar：是否顯示選單欄
    • scrollbars：是否顯示滾動條
    • location：是否顯示地址
    • status：是否新增狀態列

• close()　　　　　　　　　　　　關閉瀏覽器視窗

定時器方法

• 超時呼叫：setTimeout(code,millisec)
  • code：不推薦直接寫執行程式碼，效能不高，而是寫函式
  • 方法返回ID值，用於取消超時呼叫
• 間歇呼叫：setInterval(code,millisec)
  • clearInterval(id)
    • 可與setTimeOut配合使用達到N秒後清除間歇呼叫定時器 的作用

History物件

• 儲存使用者在瀏覽器訪問頁面的歷史記錄
• 只要url改變就會生成歷史記錄
• 常用方法
  • back()      歷史記錄的上一步
    • 相當於history.go(-1)
  • forward()      歷史記錄的下一步
    • 相當於history.go(1)
  • go(x)      載入history列表中的某個具體頁面
    • 載入history列表中的某個具體頁面

Location物件

• 提供當前頁面載入文件（html檔案）中包含的資訊

• 提供導航功能

• 包含有關當前URL的資訊，把url解析成獨立片段，通過屬性可訪問

• 既是window物件的屬性，也是document物件的屬性

• 屬性

  • location.href     返回當前載入頁面的完整url

    • 某些瀏覽器協議及查詢引數等資訊隱藏會獲取不到

  • location.hash     返回URL的hash（#號後的值），不包含則返回空字串

    • 也可設定值，做頁面內錨點連結
      location.hash = "#top"; //尋找頁面中id為top的元素並跳轉到相應位置

  • location.host    返回伺服器名稱和埠號

  • location.hostname  返回伺服器名稱

  • location.pathname  返回url中的目錄與檔名

  • location.port     返回url中的埠

  • location.protocol   返回頁面使用的協議

  • location.search   返回url的查詢字串（？開頭的字串）

• 位置操作

  • 可返回頁面
    • location.href = ""
    • window.location = ""
    • location.assign(URL)  連結到一個新頁面
  • 不能返回之前的頁面
    • location.replace(URL)  新頁面覆蓋當前頁面
    • open()    新標籤頁開啟頁面
  • location.reload()  重新整理頁面
    • 不傳引數：嘗試利用快取重新整理頁面
    • 引數為true：忽略快取，強制從伺服器重新載入
    • reload後的程式碼可能執行也可能不執行，建議放在最後一行

Screen（不常用）

• 包含客戶端螢幕資訊

• 獲取顯示器螢幕高寬（不包括工作列）

  • Screen.availWidth
  • Screen.availHeight

• 獲取視窗文件顯示區域寬高

  • window.innerHeight
  • window.innerWidth

Navigator

• 獲取使用者作業系統和瀏覽器資訊
• 常用屬性
  • navigator.userAgent
    • 建議封裝使用
    • 實現對瀏覽器識別，用於跨瀏覽器支援