JavaScript 瀏覽器對象BOM

瀏覽器對象 BOM

• BOM是browser Object Model的縮寫，簡稱瀏覽器對象模型
• BOM由一系列相關的對象構成，並且每個對象都提供了很多方法與屬性
• 基本的BOM體系結構圖
  
• BOM提供了一些訪問窗口對象的一些方法，我們可以用它來移動窗口位置、改變窗口大小、打開新窗口或關閉窗口、彈出對話框、進行導航以及獲取客戶的一些信息，如：瀏覽器品牌版本，屏幕分辨率等。但BOM最強大的功能是它提供了一個訪問HTML頁面的接口------document對象，以使得我們可以通過這個口接口來使用DOM的強大功能

---

window 對象

• JavaScript的所有對象都存在於一個運行環境之中，這個運行環境本身也是對象，稱爲“頂層對象”。這就是說，JavaScript的所有對象，都是“頂層對象”的下屬。不同的運行環境有不同的“頂層對象”，在瀏覽器環境中，這個頂層對象就是window對象（w爲小寫）

• 所有瀏覽器環境的全局變量，都是window對象的屬性

• 可以簡單理解成，window就是指當前的瀏覽器窗口

• window可以不寫

window對象屬性

• window.innerWidth：返回窗口的文檔顯示區的寬度
• window.innerheight：返回窗口的文檔顯示區的高度
• window.pageXOffset：返回頁面的水平滾動距離
• window.pageYOffset：返回頁面的垂直滾動距離。這兩個屬性的單位爲像素

---

window對象方法

定時器

setInterval() 和 setTimeout() 是 HTML DOM Window對象的兩個方法；可以不使用window前綴，直接使用函數

• setInterval(要執行的動作，時間：毫秒)：按照指定週期來調用函數或計算表達式；把函數當成字符串，就可以傳參數
• setTimeout(要執行的動作，時間：毫秒)：在指定的毫秒數後調用函數或計算表達式
• clearInterval(要清理的定時器名稱)：取消由setInterval()設置的Interval
• clearTimeout(要清理的定時器名稱)：取消由setTimeout()方法設置的timeout

    <script>
        function func(){
            document.write("2秒後我會執行！");
        }

        var setId = setTimeout(func, 2000);
        document.write("setTimeout ID：" + setId);
        //clearTimeout(setId);


        var setId = setInterval(func, 2000);
        document.write("setInterval ID: " + setId);
        //clearInterval(setId);
    </script>

---

窗口控制

• open()：打開一個新的瀏覽器窗口或查找一個已命名的窗口；參數如下：
  1、URL：聲明瞭要在新窗口中顯示的文檔的URL
  2、name：聲明瞭新窗口的名稱或者窗口目標
  3、 feature：聲明瞭新窗口要顯示的標準瀏覽器的特徵
  4、窗口的屬性
  （1）、width：新建窗口寬度
  （2）、height：新建窗口高度
  （3）、top：左上角垂直座標
  （4）、left：左上角水平座標
• close()：關閉當前瀏覽器窗口

 <script>
      // open("https://www.baidu.com", "window1");
      open("https://www.baidu.com", "window1", "height = 300px, width = 200px, top = 50px, left = 50px");
      // close();
  </script>

• moveTo(x, y)：將窗口移動到絕對座標(x, y)
• moveBy(x, y)：將窗口移動到相對座標(x, y)
• resizeTo(w, h)：將窗口調整到絕對的大小
• resizeBy(w, h)：將窗口調整到相對的大小

---

彈窗

可以在 JavaScript 中創建三種消息框：警告框、確認框、提示框

• alert()：顯示帶有一段消息和一個確認按鈕的警告框
• confirm()：顯示可提供用戶輸入的對話框。返回值爲布爾值
• prompt()：顯示帶有一段消息以及確認按鈕和取消按鈕的對話框
  （1）、第一個參數是提示，第二個參數是默認值
  （2）、返回值爲輸入的值，取消返回null

<script>
  window.alert("警告框, window可以不添加！");

  var rep = confirm("按確定返回true, 按取消返回false！");
  document.write(rep);

  var rep = prompt("第一個參數是提示", "第二個參數是默認值！");
  document.write(rep);
</script>

---

Navigator 對象

Window對象的Navigator屬性，指向一個包含瀏覽器相關信息的對象

window.navigator 對象在編寫時可不使用 window 這個前綴

• navigator.appCodeName：返回瀏覽器的代碼名
• navigator.appName：返回瀏覽器的名稱
• navigator.appVersion：返回瀏覽器的平臺和版本信息
• navigator.cookieEnabled：返回指明瀏覽器中是否啓用cookie的布爾值
• navigator.userAgent：返回由瀏覽器發送服務器的user-agent頭部的值
• navigator.onLine：返回指定系統是否處於脫機模式的布爾值

---

Screen 對象

screen對象包含了顯示設備的信息

window.screen對象在編寫時可以不使用 window 這個前綴

• screen.availHeight：返回客戶端屏幕的高度（除Windows任務欄之外）
• screen.availWidth：返回客戶端屏幕的寬度（除Windows任務欄之外）
• screen.height：返回客戶端屏幕的高度（包括Windows任務欄）
• screen.width：返回客戶端屏幕的高度（包括Windows任務欄）

---

History 對象

瀏覽器窗口有一個history對象，用來保存瀏覽歷史

window.history對象在編寫時可不使用 window 這個前綴

history對象有back和forward兩個方法，它可以跳轉到當前的上一頁和下一頁，可以用length屬性查看客戶端瀏覽器的歷史列表中訪問的網頁個數

• back()：加載history列表中的前一個URL
• forward()：加載history列表中的下一個URL
• go()：加載history列表中的某個具體頁面

---

Location 對象

window.location 對象用於獲得當前頁面的地址 (URL)，並把瀏覽器重定向到新的頁面

這種方法既可以用於具有onclick事件的標籤，也可以用於滿足某些條件進行跳轉，特點是方便且靈活

window.location 對象在編寫時可不使用 window 這個前綴

Location對象屬性

• href：跳轉或返回完整的URL
• host：設置或返回主機名和當前URL的端口號
• hash：設置或返回#號開始的URL（錨）
• hostname：設置或返回當前URL的主機名
• pathname：設置或返回當前URL的路徑部分
• port：設置或返回當前URL的端口號
• protocol：設置或返回當前URL的協議
• search：設置或返回從問好（？）開始的URL（查詢部分）

---

Location對象方法

• assign()：加載新的文檔

• reload()：重新加載當前文檔
  1、如果該方法沒有規定參數，或者參數是false，它就會用HTTP頭If-Modified-Since來檢測服務器上的文檔是否已改變。如果文檔已改變，reload會再次下載該文檔。如果文檔未改變，則該方法將緩存中裝載文檔。這與客戶點擊瀏覽器的刷新按鈕的效果是完全一樣的
  2、如果把該方法的參數設置爲true，那麼無論文檔的最後修改日期是什麼，它都會繞過緩存，從服務器上重新下載該文檔。這與用戶在單擊瀏覽器的刷新按鈕時按住Shift鍵的效果是完全一樣

• replace()：用新的文檔替換當前文檔
  1、該該方法不會再history對象中生成一個新的記錄。當使用該方法時，新的URL將覆蓋history對象的當前記錄