聊聊BOM的那些事

BOM

BOM的全稱是Browser Object Model，被譯爲瀏覽器對象模型
BOM提供了獨立於HTML頁面內容，而與瀏覽器相關的一系列對象，主要被用於管理瀏覽器窗口及與瀏覽器窗口之間通訊等功能
BOM由一系列對象構成，這些對象能夠簡單理解爲是由各個瀏覽器所提供的

Window對象

BOM中最核心的對象就是Window對象，該對象表示運行HTML頁面的瀏覽器窗口
在瀏覽器環境中，Window對象具備雙重角色，該對象既是容許JavaScript邏輯訪問瀏覽器窗口的一個對象，又是ECMAScript規範中的Global全局對象
在瀏覽器環境中運行JavaScript邏輯時，在全局做用域中定義的對象、變量和函數都是Window對象的屬性和方法
也能夠經過Window對象訪問Global全局對象的屬性和方法。

全局做用域

在瀏覽器環境中，因爲ECMAScript規範中Window對象表明了Global全局對象，所以全部定義在全局做用域中的變量和函數，均可以經過Window對象的屬性和方法方式訪問

var name='前端';
function fun(){
    console.log('this is function');
}
//window對象的屬性和方法方式訪問
console.log(window.name);
window.fun();

Window對象的屬性

Window對象的屬性數量較多，包含了瀏覽器窗口的基本信息、也包含了一些複雜的信息。能夠人爲將Window對象分爲如下三類：
1.BOM中其餘對象，例如Navigator對象等
2.一些有關瀏覽器窗口的基本信息等，這些屬性多屬於DOM 0級別，並非W3C標準規範
3.包含了大量有關HTML5版本新增的功能等

瀏覽器窗口的寬度和高度

Window對象提供的屬性中能夠獲取當前瀏覽器窗口的寬度和高度

• innerWidth和innerHeight屬性：只讀屬性，返回當前瀏覽器窗口的可視寬度和高度，若是存在滾動條，也包含滾動條
• outterWidth和outterHeight屬性：

Window對象與self屬性

Window對象的self屬性返回當前瀏覽器窗口的只讀屬性，self屬性返回的是Window對象的引用

console.log(window==window.self);

Window對象的方法

Window對象的方法

• 系統提示框：alert()方法、confirm()方法和prompt()方法
• 打開與關閉窗口：open()與close()方法、showModalDialog()
• DOM規範標準0級別的一些方法
• 定時器：setTimeout()與clearTimeout()、setInterval()與clearInterval()

Navigator對象

Navigator對象包含了一些有關瀏覽器狀態的信息。能夠經過window.navigator屬性獲得Navigator對象
Navigator對象提供一系列經常使用屬性，獲取當前瀏覽器的信息

• appCodeName：瀏覽器的代碼名
• appName：瀏覽器的名稱
• appVersion：瀏覽器的平臺和版本信息
• platform：運行瀏覽器的操做系統平臺

userAgent屬性

Navigator對象的userAgent屬性返回由客戶機發送服務器的user-agent頭部的值，userAgent屬性是一個只讀的字符串，聲明瞭瀏覽器用於HTTP請求的用戶代理頭的值
經過userAgent屬性獲取用戶當前使用的瀏覽器產品，提供瀏覽器兼容解決方案
經過userAgent屬性獲取用戶當前使用的操做系統信息

History對象

History對象包含用戶在瀏覽器中訪問過的URL(網址)

• length屬性：History對象的length屬性能夠獲取用戶在瀏覽器中訪問網址的數量

console.log('用戶訪問的網址數量爲：'+history.length);

• History對象還提供瞭如下方法實現瀏覽器前進和後退功能

forward()：實現跳轉下一個頁面，做用和瀏覽器的前進按鈕同樣
back()：實現跳轉上一個頁面，做用和瀏覽器的回退按鈕同樣
go()：實現跳轉到指定的頁面，若是爲負數表示後退，若是爲正數表示前進

Location對象

Location對象包含了瀏覽器的地址欄中的信息，該對象主要用於獲取和設置地址
Location對象很特別，由於該對象既是Window對象的屬性，又是Document對象的屬性

console.log(window.location==document.location);//true

Location對象的屬性

Location對象不只存儲了地址欄中的信息，還提供瞭解析功能，能夠經過不一樣的Location對象的屬性訪問不一樣的地址欄中的信息

• host：返回服務器名稱和端口號
• hostname：返回服務器名稱
• href：返回當前加載頁面的完整URL
• pathname：返回當前URL中的目錄和文件名
• port：返回當前URL中的端口號
• protocol：返回頁面使用的網絡協議

Location對象的方法

• assign()：載入一個新的文檔，做用和直接修改Location相同
• reload()：從新載入當前文檔，做用和刷新按鈕同樣，參數爲true時，則會強制清空緩存刷新頁面
• replace()：用新的文檔替換當前文檔(不會生成歷史記錄，不能使用回退按鈕回退)

定時器

定時器的具體方法由Window對象提供

• 延遲執行：指的是指定程序代碼在指定時間後被執行，而不是當即被執行

setTimeout()方法設置一個定時器，該定時器在定時器到期後執行一個函數或指定的一段代碼

var timeoutID=scope.setTimeout(function,delay);
function:要調用的函數或要執行的代碼
delay:延遲的毫秒數(一秒等於1000毫秒)，函數的調用會在該延遲以後發生。若是省略該參數，delay取默認值0

該方法的返回值timeoutID是一個正整數，表示定時器的編號。這個值能夠傳遞給clearTimeout()來取消該定時

• 週期執行：指的是指定程序代碼在指定時間爲間隔，重複被執行

setInterval()方法重複調用一個函數或執行一個代碼段，在每次調用之間具備固定的時間延遲

var timeoutID=scope.setInterval(function,delay);

function:要調用的函數或要執行的代碼delay:延遲的毫秒數(一秒等於1000毫秒)，函數的調用會在該延遲以後發生，若是省略該參數，delay取默認值0該方法的返回值timeoutID是一個正整數，表示定時器的編號，這個值能夠傳遞給clearInterval()來取消該定時