BOM物件

BOM物件

• 瀏覽器物件模型

• BOM可以使我們通過js來操作瀏覽器

• 在BOM中提供了一組物件，用來完成對瀏覽器的操作

  • Window

    • 代表整個瀏覽器的視窗，同時window也是網頁中的全域性物件

  • Navigator

    • 代表當前瀏覽器的資訊，通過該物件可以來識別不同的瀏覽器

    • 由於歷史原因，Navigator物件中的大部分屬性都已經不能幫助我們識別瀏覽器了

    • 一般我們只會使用userAgent來判斷瀏覽器資訊

      • ua是一個字串，包含了描述了瀏覽器資訊的字串

  • Location

    • 代表當前瀏覽器的位址列資訊，通過location可以跳轉頁面

  • History

    • 代表瀏覽器的歷史記錄

    • 由於隱私原因，該物件不能獲取到具體的歷史記錄，

      • 只能操作瀏覽器向前或者後退功能

      • 而且該操作只在當次有效

  • Screen代表使用者的螢幕的資訊，顯示器的相關資訊

    • 代表使用者的螢幕的資訊，顯示器的相關資訊

  • 這些DOM物件在瀏覽器中都是作為window的屬性儲存的

    • 可以通過window物件來使用，也可以直接使用

使用BOM物件判斷瀏覽器

• chrome userAgent:

  • Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.80 Safari/537.36

• firefox userAgent:

  • Mozilla/5.0 (Macintosh; Intel Mac OS X 10.13; rv:68.0) Gecko/20100101 Firefox/68.0

• safari userAgent:

  • Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_1) AppleWebKit/604.3.5 (KHTML, like Gecko) Version/11.0.1 Safari/604.3.5

• IE8-IE10

  • 均會出現MSIE標識字樣，來確認瀏覽器的型別和版本

  • 但是到IE11時，MSIE字樣標識已經徹底沒有了，無法通過這個方式來判斷

  • 注意：此時通過ua無法精準的判斷瀏覽器型別是否為IE了，我們還可以通過一些瀏覽器中特有的物件，來判斷瀏覽器資訊

    • 比如IE中特有的物件:

    • ActiveXobject 【if(ActiveXobject)】【if("ActiveXobject" in window)】

• 案例

  • var ua = navigator.userAgent;
    console.log(ua);
    ​
    if(/firefox/i.test(ua)){
      alert("你是火狐");
    }else if(/chrome/i.test(ua)){
      alert("你是chrome");
    }else if(/msie/i.test(ua)){
      alert("IE瀏覽器");
    }else if ("ActiveXobject" in window){
      alert("你是IE11瀏覽器!");
    };

BOM物件-history

• length

  • 屬性，可以獲取到當前訪問頁面的連線數量

• back()

  • 可以用來回退到上一個頁面，作用和瀏覽器的回退按鈕一樣,往後退一個頁面

• forward()

  • 可以跳轉到下一個頁面，作用和瀏覽器的前進按鈕一樣,往前進一個頁面

• go()

  • 可以用來跳轉到指定的頁面

  • 它需要一個整數作為引數

    • 引數=1 表示向前跳轉一個頁面

    • 引數=2 表示想前跳轉兩個頁面

    • 引數=-1 表示向後跳轉一個頁面

    • 引數=-2 表示想後跳轉兩個頁面

BOM物件-location

• 如果將location屬性改為一個完整的路徑，或者相對路徑

• 則我們頁面會自動跳轉到該路徑，並生成歷史記錄

  • assign()

    • 用來跳轉到其他的頁面，作用和直接修改location效果一樣

  • reload()

    • 用於重新載入當前頁面，作用和重新整理按鈕一樣

    • 如果再方法中傳遞引數：true 表示強制清空快取重新整理頁面

  • replace()

    • 可以使用一個新的頁面替換當前頁面，呼叫完畢也會跳轉頁面

    • 不會生成歷史記錄，不能使用回退按鈕