一、什麽是BOM？

BOM（Browser Object Model）是指瀏覽器對象模型，它使 JavaScript 有能力與瀏覽器進行“對話”。

二、Windows對象

Window對象是客戶端JavaScript最高層對象之一，由於window對象是其它大部分對象的共同祖先，在調用window對象的方法和屬性時，可以省略window對象的引用。例如：window.document.write()可以簡寫成：document.write()。

所有瀏覽器都支持 window 對象。它表示瀏覽器窗口。

所有 JavaScript 全局對象、函數以及變量均自動成為 window 對象的成員。

全局變量是 window 對象的屬性。全局函數是 window 對象的方法。

接下來要講的HTML DOM 的 document 也是 window 對象的屬性之一。

一些常用的Window方法：

• window.innerHeight - 瀏覽器窗口的內部高度
• window.innerWidth - 瀏覽器窗口的內部寬度
• window.open() - 打開新窗口
• window.close() - 關閉當前窗口

三、Windows的子對象

• navigator對象

  • 瀏覽器對象，通過這個對象可以判定用戶所使用的瀏覽器，包含了瀏覽器相關信息。

    navigator.appName　　// Web瀏覽器全稱
    navigator.appVersion　　// Web瀏覽器廠商和版本的詳細字符串
    navigator.userAgent　　// 客戶端絕大部分信息
    navigator.platform　　　// 瀏覽器運行所在的操作系統

• screen對象

  • 屏幕對象，不常用。

    一些屬性：

    • 　　screen.availWidth - 可用的屏幕寬度

    • 　　screen.availHeight - 可用的屏幕高度

• history對象

  • window.history 對象包含瀏覽器的歷史。
  • 瀏覽歷史對象，包含了用戶對當前頁面的瀏覽歷史，但我們無法查看具體的地址，可以簡單的用來前進或後退一個頁面。

    history.forward()  // 前進一頁
    history.back()  // 後退一頁

• location對象

  • window.location 對象用於獲得當前頁面的地址 (URL)，並把瀏覽器重定向到新的頁面。
  • 常用屬性和方法：

    location.href  獲取URL
    location.href="URL" // 跳轉到指定頁面
    location.reload() 重新加載頁面

• 彈出框

  • 可以在 JavaScript 中創建三種消息框：警告框、確認框、提示框。
  • 警告框

    警告框經常用於確保用戶可以得到某些信息。

    當警告框出現後，用戶需要點擊確定按鈕才能繼續進行操作。

    語法：

    alert("你看到了嗎？");

    確認框（了解即可）

    確認框用於使用戶可以驗證或者接受某些信息。

    當確認框出現後，用戶需要點擊確定或者取消按鈕才能繼續進行操作。

    如果用戶點擊確認，那麽返回值為 true。如果用戶點擊取消，那麽返回值為 false。

    語法：

    confirm("你確定嗎？")

    提示框（了解即可）

    提示框經常用於提示用戶在進入頁面前輸入某個值。

    當提示框出現後，用戶需要輸入某個值，然後點擊確認或取消按鈕才能繼續操縱。

    如果用戶點擊確認，那麽返回值為輸入的值。如果用戶點擊取消，那麽返回值為 null。

    語法：

    prompt("請在下方輸入","你的答案")

• 計時相關

  • 　　

    通過使用 JavaScript，我們可以在一定時間間隔之後來執行代碼，而不是在函數被調用後立即執行。我們稱之為計時事件。

    setTimeout()

    語法：

    var t=setTimeout("JS語句",毫秒)

    setTimeout() 方法會返回某個值。在上面的語句中，值被儲存在名為 t 的變量中。假如你希望取消這個 setTimeout()，你可以使用這個變量名來指定它。

    setTimeout() 的第一個參數是含有 JavaScript 語句的字符串。這個語句可能諸如 "alert(‘5 seconds!‘)"，或者對函數的調用，諸如 alertMsg()"。

    第二個參數指示從當前起多少毫秒後執行第一個參數（1000 毫秒等於一秒）。

    clearTimeout()

    語法：

    clearTimeout(setTimeout_variable)

    舉個例子：

    // 在指定時間之後執行一次相應函數
    var timer = setTimeout(function(){alert(123);}, 3000)
    // 取消setTimeout設置
    clearTimeout(timer);

    setInterval()

    setInterval() 方法可按照指定的周期（以毫秒計）來調用函數或計算表達式。

    setInterval() 方法會不停地調用函數，直到 clearInterval() 被調用或窗口被關閉。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的參數。

    語法：

    setInterval("JS語句",時間間隔)

    返回值

    一個可以傳遞給 Window.clearInterval() 從而取消對 code 的周期性執行的值。

    clearInterval()

    clearInterval() 方法可取消由 setInterval() 設置的 timeout。

    clearInterval() 方法的參數必須是由 setInterval() 返回的 ID 值。

    語法：

    clearInterval(setinterval返回的ID值)

    舉個例子：

    // 每隔一段時間就執行一次相應函數
    var timer = setInterval(function(){console.log(123);}, 3000)
    // 取消setInterval設置
    clearInterval(timer);

JavaScript之BOM