【JavaScript】BOM（浏覽器對象模型）知識梳理

目錄

• ​​1. window 對象​​

• ​​1.1 全局變量​​
• ​​1.2 視窗位置​​
• ​​1.3 視窗大小​​
• ​​1.4 導航和打開視窗​​
• ​​1.5 間歇調用和逾時調用​​
• ​​1.6 系統對話框​​

• ​​2. location 對象​​

• ​​2.1 location對象屬性​​
• ​​2.2 location對象方法​​
• ​​2.3 擷取字元串參數​​

• ​​3. navigator 對象​​
• ​​4. screen 對象​​
• ​​5. history 對象​​

前言：

JavaScript 由三部分構成：​

​ECMAScript​

​​，​

​DOM​

​​和​

​BOM​

​。

• ECMAScript ：描述了JavaScript的文法和基本對象
• DOM（document object model）：文檔對象模型，提供操作頁面元素的方法和屬性
• BOM（browser object model）：浏覽器對象模型，提供一些屬性和方法可以操作浏覽器

下面就來梳理一下有關BOM的知識點 ~~~

1. window 對象

1.1 全局變量

BOM的核心對象就是​

​window​

​​對象，它表示浏覽器的一個執行個體。在浏覽器中​

​window​

​​對象既是通過​

​JavaScript​

​​通路浏覽器的視窗的一個接口，又是​

​ECMAScript​

​規定的Global對象。

因為​

​window​

​​對象是是​

​ECMAScript​

​​中的​

​Global​

​​對象，是以在全局作用域中定義的函數、變量都會變成​

​window​

​對象的屬性和方法。

但是直接定義在​

​window​

​​上的屬性和在全局變量中的定義的屬性是有一點差別的：在全局變量中定義的屬性不能使用​

​delete​

​​來删除，而在​

​window​

​​上定義的屬性可以使用​

​delete​

​來删除。

1.2 視窗位置

用以下屬性表示視窗相對于螢幕左邊和上邊的距離：（不同浏覽器支援情況不同）

• ​

  ​screenLeft​

  ​​和​

  ​screenTop​

  ​：IE，Safari，Opera，Chrome
• ​

  ​screenX​

  ​​和​

  ​screenY​

  ​ ：Firefox，Safari，Chrome

var left = (typeof window.screenLeft == "number")?window.screenLeft:window.screenX;
var top = (typeof window.screenTop == "number")?window.screenTop:window.screenY;      

需要注意的是，在IE和Opera中， ​

​screenLeft​

​​和​

​screenTop​

​​中儲存的是從螢幕左邊和上面帶window對象的頁面的可見區域的距離，即到浏覽器工具欄的高度。但是，在Firefox，Safari，Chrome中，​

​screenX​

​​和​

​screenY​

​中儲存的是整個浏覽器視窗相對于螢幕的坐标值。

1.3 視窗大小

1. 視窗大小

浏覽器提供了四個屬性來表示浏覽器視窗的大小：​

​innerWidth​

​​，​

​innerHeight​

​​，​

​outerWidth​

​​，​

​outerHeight​

​。但是在不同的浏覽器中，這四個屬性所代表的内容不一樣。

• 在IE9+，Safari，Firefox中​

  ​outerWidth​

  ​​和​

  ​outerHeight​

  ​​表示浏覽器視窗本身的大小；​

  ​innerWidth​

  ​​和​

  ​innerHeight​

  ​表示視口大小。
• 在Chrome中，這四個屬性都表示視口大小，傳回值相同。

2. 視口大小

在浏覽器中，​

​document.documentElement.clientWidth​

​​和​

​document.documentElement.clientHeight​

​儲存了頁面視口的資訊。

需要注意的是，在IE6中這兩個屬性隻有在标準模式下才會生效，如果是混雜模式，就需要使用​

​document.body.clientWidth​

​​和​

​document.body.clientHeight​

​擷取視口相關資訊。而對于Chrome浏覽器來說，在混雜模式下，以上四個屬性均能擷取視口相關資訊。

3. 移動裝置

在移動裝置中，​

​window.innerWidth​

​​和​

​window.innerHeight​

​儲存着可見視口，即螢幕上可見頁面大小（不包含工具欄等）。

4. 調整視窗大小

我們可以使用​

​resizeTo()​

​​和​

​resizeBy()​

​來調整浏覽器視窗的大小，這兩個屬性都接收兩個參數：

• ​

  ​resizeTo()​

  ​ ：接收浏覽器視窗的新寬度和高度
• ​

  ​resizeBy()​

  ​： 接口浏覽器新視窗和原視窗的寬度和高度之差

1.4 導航和打開視窗

使用​

​window.open​

​​可以導航到一個指定的URL，也可以打開一個新的浏覽器視窗，該方法接收四個參數​

​window.open(URL,name,specs,replace)​

​：

• ​

  ​URL​

  ​：可選，指定頁面的URL，如果沒有URL，就打開一個新的空白視窗
• ​

  ​name​

  ​​ ： 可選，指定target屬性或視窗的名稱，預設是​

  ​_blank-URL​

  ​​：加載到一個新的視窗，如果需要設定視窗名稱，就用​

  ​name-視窗名稱​

  ​
• ​

  ​specs​

  ​ ：可選，項目清單，之間用逗号分隔，表示視窗顯示的屬性
• ​

  ​replace​

  ​​ ：可選，表示新頁面是否取代浏覽器曆史記錄中目前的條目，​

  ​true-URL​

  ​​表示替換目前條目，​

  ​false-URL​

  ​表示在曆史記錄中建立新的條目。這個屬性隻在不打開新視窗的情況下使用。

1.5 間歇調用和逾時調用

JavaScript是一種單線程語言，但是允許通過逾時值（指定時間之後執行代碼）和間歇時間 （每隔一段時間執行一次代碼）來使代碼在特定時間執行。

1. 逾時調用

逾時調用需要使用window對象的​

​setTimeout()​

​方法，它需要接收兩個參數：要執行的代碼和以毫秒為機關的時間值，即逾時調用時間。調用該方法之後會傳回一個數值ID，表示逾時調用，可以通過它來取消逾時調用。

在逾時時間還沒到之前，調用​

​clearTimeout()​

​​方法，就可以取消逾時調用。在逾時調用之後在執行該方法是無效的，調用形式：​

​clearTimeout(timeoutId)​

​。

注意，該方法的第一個參數可以是字元串或函數，不過不推薦使用字元串形式，建議使用函數形式。

2. 間歇調用（不建議使用）

間歇調用使用window對象的​

​serInterval()​

​方法，參數和逾時調用一樣，隻不過第二個參數是指間歇調用時間。

該方法同樣會傳回一個數值ID，可以通過​

​clearInterval()​

​​來取消間歇調用，調用方法：​

​clearInterval(intervalId)​

​。

1.6 系統對話框

浏覽器通過​

​alert()​

​​，​

​confirm()​

​​，​

​prompt()​

​方法來調用系統對話框。這幾個對話框都是同步和模态的，也就是說顯示這些對話框的時候，代碼會停止執行，關掉對話框時，代碼會繼續執行。

這三個方法不做過多介紹了，平時感覺很少使用這些方法（主要是太醜了~）

2. location 對象

location對象是最有用的BOM對象之一，它提供了目前視窗中加載的文檔的相關資訊。還提供了一些導航功能。location對象既屬于window對象的屬性，又屬于document對象的屬性，也就是說​

​window.location​

​​和​

​document.location​

​引用的是同一對象。

2.1 location對象屬性

location對象有以下屬性：

屬性名	說明
hash	傳回一個URL的錨部分
host	傳回一個URL的主機名和端口
hostname	傳回URL的主機名
href	傳回完整的URL
href	傳回完整的URL
port	傳回一個URL伺服器使用的端口号
protocol	傳回一個URL協定
search	傳回一個URL的查詢部分

2.2 location對象方法

方法	說明
location.assign(url)	加載 URL 指定的新的 HTML 文檔。就相當于一個連結，跳轉到指定的url，目前頁面會轉為新頁面内容，可以點選後退傳回上一個頁面。
location.replace(url)	通過加載 URL 指定的文檔來替換目前文檔，這個方法是替換目前視窗頁面，前後兩個頁面共用一個視窗，是以是沒有後退傳回上一頁的
location.reload(forceGet)	forceGet類型為Boolean，可選。如果把該方法的參數設定為 true，那麼無論文檔的最後修改日期是什麼，它都會繞過緩存，從伺服器上重新下載下傳該文檔。

以下兩種方法調用的結果與第一種方法效果相同：

window.location= URL;
location.href = URL;      

2.3 擷取字元串參數

我們可以使用以下函數來解析查詢字元串，傳回一個包含參數的對象:

function getQueryStringArgs() {
     // 取得要查詢的字元串并去掉開頭的問号
     var qs = (location.search.length > 0 ? location.search.substring(1) : ""),
        //儲存資料的對象
        args = {},
        items = qs.length ? qs.split("&"): [],
        item = null,
        name = null,
        value = null,
        //  在for 循環中使用
        i = 0,
        len = items.length;

        // 逐個将每一項目添加到args對象中
        for (i; i < len; i++) {
            item = items[i].split("=");
            name = decodeURIComponent(item[0]);
           value = decodeURIComponent(items[1]);
            if (name.length) {
                args[name] = value
            }
        }
        console.log(args);
        return args;
    }      

3. navigator 對象

navigator對象包含有關浏覽器的資訊，所有浏覽器都支援該對象。

常用的浏覽器對象屬性或方法：

屬性或方法	說明
appCodeName	傳回浏覽器的代碼名
appName	傳回浏覽器的名稱
appVersion	傳回浏覽器的平台和版本資訊
cookieEnabled	傳回指明浏覽器中是否啟用 cookie 的布爾值
platform	傳回運作浏覽器的作業系統平台
userAgent	傳回由客戶機發送伺服器的user-agent 頭部的值
javaEnabled()	指定是否在浏覽器中啟用Java
taintEnabled()	規定浏覽器是否啟用資料污點(data tainting)

4. screen 對象

screen對象在JavaScript程式設計中用處不大，它基本上隻用來标明用戶端的能力，包含了顯示器的資訊。

screen對象主要的屬性有：

屬性	說明
availHeight	傳回螢幕的高度（不包括Windows工作列）
availWidth	傳回螢幕的寬度（不包括Windows工作列）
colorDepth	傳回目标裝置或緩沖器上的調色闆的比特深度
height	傳回螢幕的總高度
pixelDepth	傳回螢幕的顔色分辨率（每象素的位數）
width	傳回螢幕的總寬度

5. history 對象

history對象儲存着使用者上網的曆史記錄，出于安全考慮，開發人員不知道使用者浏覽過的URL，但是可以借助浏覽過的頁面清單，在不知道URL的情況下實作前進和後退。

使用​

​go()​

​方法可以在使用者的曆史記錄中任意跳轉，該方法接受一個參數，表示向後或者向前跳轉的頁面數的整數值，負數表示向後跳轉，正數表示向前跳轉。

我們還可以給go()方法傳遞一個字元串參數，此時浏覽器會跳轉到曆史記錄中包含該字元串的最近的位置，如果曆史記錄中不包含該字元串，那麼就不做任何操作。

示例：

history.go(-2); //後退兩頁
history.go(1);  //前進一頁
history.go("baidu.com") //跳轉到最近的baidu.com頁面      

除此之外，我們還可以通過​

​back()​

​​和​

​forward()​

​​方法開代替​

​go()​

​方法。

​

​history.go(-1)​

​​ 等同于 ​

​history.back()​

​​

​history.go(1)​

​ 等同于 ​

​history.forward()​

​

if(history.length == 0){
   //這應該是使用者打開視窗後的第一個頁面
}