1. 程式人生 > 實用技巧 >瀏覽器物件模型(BOM)

瀏覽器物件模型(BOM)

瀏覽器為JavaScript提供的物件集合通常稱為瀏覽器物件模型(Browser Object Model,BOM)

另一種常見的術語是文件物件模型(Document Object Model,DOM,W3C標準)——>見下一個隨筆

在開始介紹BOM物件的時候,先來了解一個關於BOM的一些小東西:

不僅JavaScript是基於物件的,而且瀏覽器也是由物件組成的。JavaScript在瀏覽器中執行時,可以訪問瀏覽器物件。

JavaScript的這些附加功能都存在一個潛在的弊端:BOM沒有標準的實現方式。可以使用哪個物件集合高度依賴於當前使用的瀏覽器的型別和版本。

BOM:

  BOM物件非常龐大,但是初學者只需要使用BOM中的不到10%的物件,方法和屬性。BOM有一個層次結構。在頂層的頂端是window物件,它表示瀏覽器的框架以及與其相關的所有內容,如滾動條和導航欄圖示等。在BOM中,頁面用document物件表示。

  window物件下面有許多物件如:location物件(瀏覽器當前URL資訊,當前頁面的位置資訊),history物件(瀏覽器訪問歷史資訊),navigator物件(瀏覽器本身資訊),screen物件(客戶端螢幕資訊),document物件(文件物件)等。

  window物件是一個全域性物件,因此不需要使用其名稱來訪問其屬性和方法。window的某些屬性也是物件。

window.alert()
alert()//這兩條程式碼是等價的

在web頁面中值得注意的是,所使用的函式名或變數名不能與BOM物件及其屬性和方法的名詞相沖突。

history物件:
  與JavaScript內建的Array型別類似,history物件也有length屬性。使用它可以獲得歷史棧中的頁面數量。

  go()方法,back()方法,forward()方法  go(-1)等價於back(),go(1)等價於forward()

location物件:

  獲得當前頁面位置:不僅包含了頁面的統一資源定位器(URL)還包含儲存該頁面的伺服器,連線伺服器的埠號及使用的協議。通過location物件的href,hostname,port和protocol屬性獲得這些資訊。

  改變當前頁面位置:1.location物件的replace()方法,但是這個方法將從歷史棧中移除當前頁面,代之以新頁面。

           2.使用location物件的href屬性,把新頁面加在歷史棧的頂部。

navigator物件:
  處理瀏覽器之間的差異,確定使用者的瀏覽器,版本和作業系統(“瀏覽器嗅探”技術)

navigator物件的geolocation屬性(也是一個物件):

    geolocation物件的核心部分是getCurrentPosition()方法,呼叫該方法的時候必須傳入兩個回撥函式,第一個引數是成功的時候執行的函式,第二個引數是失敗的時候執行的函式。

    函式傳入的都是物件,失敗函式傳入的物件有兩個屬性值,第一個code表示失敗原因的數值,第二個屬性為message,表示描述錯誤的可讀資訊。

    //獲取位置
    function geoSuccess(position){
        var coords = position.coords
        var latitude = coords.latitude
        var longitude = coords.longitude

        var mess = "you're at "+latitude+","+longitude
        document.write(mess)
    }

    function geoError(errorObj){
        document.write(errorObj.message+"<br>")
        document.write(errorObj.code)
            
    }

    navigator.geolocation.getCurrentPosition(geoSuccess,geoError)

screen物件:

  包含了大量有關客戶機顯示能力的資訊。

document物件:

  具體請移步另一個BOM隨筆。

  images集合:
    頁面上的每幅圖都有一個對應的img物件,每個img物件都儲存在images集合中,該集合是document物件的一個屬性。該集合與陣列的用法相同,頁面上第一幅圖片在document.images[0]元素中。

  links集合:

    頁面上所有a物件都包含在links集合中。

  forms集合:

    頁面上所有froms物件都包含在froms集合中。 

確定使用者的瀏覽器:  

  特性檢測:

    檢查特性是否存在,如果存在就使用該特性。

    以下值為falsey: 0  ""(一個空字串)  null  undefined  【】(一個空陣列)  false

    typeof可能返回的值:1(數字)  “hello”(字串)  true(布林值)  [](物件)  {}(物件)  undefined(未定義)  null(物件)

//特性檢測
        if(navigator.geolocation){
            document.write("true")
        }
//減少歧義
        if( typeof(navigator.geolocation) != "undefine"){
            document.write("true")
        }

  瀏覽器嗅探:

    navigator物件的appName屬性和userAgent屬性在標識瀏覽器方面很有用。appName屬性將返回瀏覽器的模型,userAgent屬性返回一個包含多段資訊的字串。