初識BOM及其部分物件

GY醬發表於2019-04-16
物件

BOM:Browser object Model

---- 瀏覽器物件模型------>操作的是瀏覽器的物件

瀏覽器物件

···瀏覽器頂級物件： window
  • 特殊屬性:
    • window.name : 沒定義時輸出空白。
    • window.top : 輸出與window相同
  • 系統對話方塊：
    • window.alert() : 顯示帶有可選指定內容的警告對話方塊和OK按鈕
    • window.prompt() : 顯示帶有一個可選的訊息提示使用者輸入文字的對話方塊
    • window.confirm() : 顯示帶有可選訊息的對話方塊，其中包含一個可選資訊和兩個按鈕(確定以及取消)
      以上三個對話方塊建議只在測試的時候使用
  • 頁面載入完畢
    • window.onload : 檢測頁面中的所有內容,標籤,屬性,文字,包括外部引用的JS檔案是否載入完畢
    • 擴充套件 : --window.onunload(頁面關閉後才觸發的事件) --window.onbeforeunload(頁面關閉之前觸發的)
···location物件

  • location物件包含有關當前URL的資訊

  • 屬性

    屬性 描述
    hash 設定或返回從#號開始的URL(錨)
    host 設定或返回主機名和當前URL的埠號
    hostname 設定或返回當前URL的主機名
    href 設定或返回完整的URL
    pathname 設定或返回當前URL的路徑名
    port 設定或返回當前URL的埠號
    protocol 設定或返回當前URL的協議
    search 設定或返回從?開始的URL(搜尋內容)

  • 方法:設定跳轉的頁面

    方法 描述
    assign() 載入新的文件
    reload() 重新載入當前文件(重新整理)
    replace() 用新文件替換當前文件(無歷史記錄)
···history物件
  • history物件包含使用者(在瀏覽器視窗中)訪問過的URL
  • 屬性 ： length 返回瀏覽器歷史列表中URL數量
  • 方法
    方法 描述
    back() 載入前一個URL
    forward() 載入下一個URL
    go() 載入歷史列表中的某個具體的頁面(引數:-1上一個頁面，1前進一個頁面或URL字串)
···navigator物件
  • 通過這個物件可以獲得瀏覽器的瀏覽器的種類、版本號等屬性
  • 部分屬性
    屬性 屬性值
    appCodeName 瀏覽器的程式碼名稱，如Firefox、IE的程式碼都是Mozilla
    appName 瀏覽器的名稱
    platform 瀏覽器的作業系統或硬體型別
    userAgent 宣告瞭瀏覽器用於 HTTP 請求的使用者代理頭的值。
···定時器
  • 迴圈定時器
    • 建立定時器 : window.setInterval(fn,time);
      • 引數1 : 函式 引數2 : 時間---毫秒---1000ms--1s
      • 執行過程 ：頁面載入完畢後,過了一秒。執行一次函式程式碼,又過了1秒再執行函式
      • 返回值是定時器的id值
    • 清除定時器 : window.clearInterval(timeId);
      • 引數 ： 要清理的定時器的id的值
  • 一次性定時器
    • 建立定時器 ：window.setTimeout(fn,time);
    • 清除定時器 ：clearTimeout(timeId);

返回當前瀏覽器型別

/**
 * 返回當前瀏覽器是什麼型別的瀏覽器
 */
function userBrowser(){
    var browserName=navigator.userAgent.toLowerCase();
    if(/msie/i.test(browserName) && !/opera/.test(browserName)){
        console.log("IE");
    }else if(/firefox/i.test(browserName)){
        console.log("Firefox");
    }else if(/chrome/i.test(browserName) && /webkit/i.test(browserName) && /mozilla/i.test(browserName)){
        console.log("Chrome");
    }else if(/opera/i.test(browserName)){
        console.log("Opera");
    }else if(/webkit/i.test(browserName) &&!(/chrome/i.test(browserName) && /webkit/i.test(browserName) && /mozilla/i.test(browserName))){
        console.log("Safari");
    }else{
        console.log("不知道什麼鬼!");
    }
}
複製程式碼

------------------------------------------------------記錄於 2019.4.16 JavaScript之BOM

相關文章