初識BOM及其部分對象

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