BOM學習總結

大猿猴發表於2018-12-10

BOM簡介

BOM英文全稱是Browser Object Model，即瀏覽器物件模型，為了便於操作瀏覽器而產生。W3C並沒有對BOM統一標準，使用時有相容性問題。

window

定義

表示瀏覽器的視窗，是最頂層的物件

屬性

  • frames

    獲取當前視窗下所有子窗體組成的陣列物件。每個iframe標籤都對應一個window物件

  • length

    獲取當前視窗下的iframe數量

  • name

    獲取視窗名稱

  • parent

    獲取當前視窗的父視窗

  • top

    獲取頂級父視窗

  • self

    獲取當前視窗

  • innerWidth

    獲取視窗畫素寬度

  • innerHeight

    獲取視窗畫素高度

  • pageXOffset

    獲取頁面相對於視窗顯示區左上角的X方向偏移量

  • pageYOffset

    獲取頁面相對於視窗顯示區左上角的Y方向偏移量

  • screenX

    獲取視窗相對於螢幕的X方向位置

  • screenY

    獲取視窗相對於螢幕的Y方向位置

  • outerWidth

    獲取視窗可見區域寬度

  • outerHeight

    獲取視窗可見區域高度

  • opener

    獲取對建立此視窗的視窗的引用。比如在a.html開啟b.html，需要從b.html傳遞一個資料給a.html上某節點，程式碼如下，

      window.opener.document.getElementById(id).value =data;
複製程式碼

  • localStorage

    獲取視窗的本地儲存物件，資料儲存在瀏覽器本地

  • sessionStorage

    獲取視窗的會話儲存物件，當視窗關閉時資料被刪除

擴充套件：全域性變數與window物件屬性的聯絡與區別

  • 聯絡

    全域性變數可以作為window物件的屬性進行訪問

  • 區別

    全域性變數不能直接delete，window物件屬效能直接delete；訪問未宣告的全域性變數會拋錯，訪問window物件未定義的屬性不拋錯

方法

  • setTimeout(fn/code,millseconds[,parms])

    經過指定毫秒值計算一個表示式或呼叫某一個函式

  • setInterval(fn/code,millseconds[,parms])

    每經過指定毫秒值計算一個表示式或呼叫某一個函式

  • clearTimeout(id)

    取消先前用setTimeout設定的超時事件

  • clearInterval(id)

    取消先前用setInterval設定的間隔事件

  • moveTo(x,y)

    視窗移動到指定位置

  • moveBy(x,y)

    視窗相對於當前位置移動一定的偏移量

  • scrollBy(x,y)

    頁面相對於當前滾動的偏移量

  • scrollTo(x,y)

    頁面滾動到指定位置

  • resizeTo(x,y)

    視窗重置為指定大小

  • resizeBy(x,y)

    視窗相對於當前大小進行大小偏移

  • open(url[,target][,option])

    開啟新的視窗，需指定要開啟的url，也可指定執行開啟的視窗或框架目標，如_self、_parent、_top、_blank，和設定被開啟視窗的選項字串，如寬高、大小是否拖動邊框可變、是否顯示位址列、選單欄、工具欄、滾動條、狀態列等等。結果返回新開啟的視窗物件。

    擴充套件：

    • 彈窗安全限制
    1. 不允許在螢幕外建立彈出視窗
    2. 不允許將彈出視窗移動到螢幕以外
    3. 不允許關閉狀態列
    4. 不允許關閉位址列
    5. 預設下不允許移動彈出視窗或調整大小
    6. 不允許關閉位址列
    7. 只能根據使用者建立彈出視窗，因此頁面載入時呼叫open方法是無效的

    • 彈出視窗遮蔽檢測

      function checkWindowBlocked(url){
    var blocked = false;
    try{
        var win = window.open(url);
        if(win == null){
          blocked = true;
        }
    }catch(ex){
         blocked = true;
    }
    if(blocked){
        alert("彈窗被遮蔽");
    }
}		
複製程式碼

  • close()

    關閉視窗

  • alert(content)

    彈出警告訊息框，指定警告內容，帶有確定按鈕

  • confirm(content)

    彈出確認訊息框，指定確認內容，帶有確定和取消按鈕

  • prompt(content,defaultvalue)

    彈出提示訊息框，指定提示內容和輸入框預設值，帶有確定和取消按鈕

  • print()

    彈出列印對話方塊

  • find()

    彈出查詢對話方塊

  • getComputedStyle(ele[,pseudoele])

    獲取指定元素的樣式，需要的話可以傳入偽類元素。與ele.style的區別：ele.style只讀取內聯樣式，而getComputedStyle讀取內聯樣式、嵌入樣式、外部樣式等；ele.style支援讀寫，而getComputedStyle只支援讀

  • showModalDialog(sURL[,vArguments][,sFeatures])

    開啟模式對話方塊。其中sURL指定對話方塊要顯示的文件URL，vArguments指定向對話方塊傳遞的引數，引數型別不限，而對話方塊通過window.dialogArguments取得傳遞進來的引數，sFeatures指定描述對話方塊的外觀等資訊，是一個可變引數

location

作用

  • 提供當前頁面url資訊
  • 實現頁面跳轉

屬性

以 www.baidu.com/index.php?t… 為例，解釋各屬性含義。

  • protocol

    協議名，"https:"

  • hostname

    主機名，不包括埠號，"www.baidu.com"

  • port

    埠號，""

  • host

    主機地址，包括埠號，"www.baidu.com"

  • pathname

    路徑名，"/index.php"

  • search

    查詢字串，"?tn=22073068_2_dg"

  • href

    連結地址，"www.baidu.com/index.php?t…"

  • origin

    源，"www.baidu.com"

  • hash

    雜湊值，"#1111"

應用： 封裝獲取查詢字串的函式

function getQueryString(qs){
   if(typeof qs === "string"){
        var obj = {},arr;
        qs = qs.slice(1).split("&");
        for(item in qs){
            arr = qs[item].split("=");
            obj[arr[0]] = arr[1];
        }
        return obj;       
   }
}
複製程式碼

修改當前url，會在瀏覽器歷史中生成一條記錄

location.hash = "#home";
location.hostname = "www.baidu.com";
location.pathname = "/home/index";
location.serach = "?key=liu&password=123456";
...
複製程式碼

頁面跳轉幾種方式

window.location = url;
window.location.href = url;
window.location.assign(url);
window.location.replace(url);//與assign區別在於，使用replace不可返回上一頁面
複製程式碼

頁面過載

window.reload();//從快取中重新載入
window.reload(true);//從伺服器重新獲取資料進行載入
複製程式碼

該方法建議放在程式碼最後，因為該方法呼叫後的接下來的程式碼可能執行也可能不執行，取決於網路延遲或系統資源等因素。

navigator

作用

識別瀏覽器

屬性

  • appCodeName

    瀏覽器名稱。基本是Mozilla

  • appName

    完整的瀏覽器名稱

  • appVersion

    瀏覽器版本

  • mimeTypes

    瀏覽器註冊的MIME型別陣列

  • platform

    瀏覽器所在的系統平臺

  • plugins

    瀏覽器安裝的外掛資訊陣列。該陣列物件有一方法叫refresh，當傳入引數true時表示重新整理包含外掛的所有頁面，否則表示更新外掛資訊，不重新整理含外掛的頁面。陣列中的每一項含有外掛名name、外掛描述description、外掛檔名filename、外掛處理的MIME型別數量length

  • userAgent

    瀏覽器使用者代理字串。可用於判斷瀏覽器型別和版本

方法

  • cookieEnabled()

    表示cookie是否啟用

  • javaEnabled()

    表示當前瀏覽器是否啟用java

  • registerContentHandler(mime,url,appname)

    使站點註冊一個處理程式處理指定MIME。其中mime表示要處理的mime型別，url表示要處理的url如http://xxx?feed=%s，%s表示源請求，appname表示要處理的應用程式名稱

  • registerProtocolHandler(protocol,url,appname)

    使站點註冊一個處理程式處理指定協議。其中protocol表示要處理的協議名稱，url表示要處理的url如http://xxx?cmd=%s，%s表示源請求，appname表示要處理的應用程式名稱

應用

判斷桌面瀏覽器型別

function getBrowserType(){
    var userAgent = window.navigator.userAgent;
    if(userAgent.indexOf("Trident")>-1){
        return "IE";
    }
    if(userAgent.indexOf("Firefox")>-1){
        return "Firefox";
    }
    if(userAgent.indexOf("Opera")>-1){
        return "Opera";
    }
    if(userAgent.indexOf("Edge")>-1){
        return "Edge";
    }
    if(userAgent.indexOf("Chrome")>-1){
        return "Chrome";
    }
    if(userAgent.indexOf("Safari")>-1){
        return "Safari";
    }
}
複製程式碼

外掛檢測

function hasPlugin(idname){
    var userAgent = window.navigator.userAgent;
    if(userAgent.indexOf("Trident")>-1){
        // IE檢測
        try{
            new ActiveXObject(idname);
            return true;
        }catch(ex){
            return false;
        }
    }else{
        // 非IE檢測
        for(var i=0;i<navigator.plugins.length;i++){
            if(navigator.plugins[i].name.toLowerCase().indexOf(idname.toLowerCase())>-1){
                return true;
            }
        }
        return false;
    }
}
複製程式碼

history

作用

儲存使用者訪問網頁的歷史記錄

屬性

  • length
    訪問的歷史頁面數量

方法

  • go(value)

    跳轉到歷史列表的某頁面。當value是number型別時，為正向前跳轉value個頁面，為負向後跳轉；當value是string型別時，跳轉到與value最匹配的頁面。

  • back()

    向後跳轉，相當於go(-1)

  • forward()

    向前跳轉，相當於go(1)

screen

作用

測定客戶端能力

屬性

  • width

    螢幕的畫素寬度

  • height

    螢幕的畫素高度

  • availHeight

    螢幕的畫素高度減系統部件高度之後的值(只讀)

  • availWidth

    螢幕的畫素寬度減系統部件寬度之後的值(只讀)

  • colorDepth

    用於表現顏色的位數(只讀)

相關文章