[js]BOM篇

一、什么是BOM

• BOM（Browser Object Model）即瀏覽器對象模型。
• BOM提供了獨立于內容 而與瀏覽器窗口進行交互的對象；
• 由于BOM主要用于管理窗口與窗口之間的通訊，因此其核心對象是window；
• BOM由一系列相關的對象構成，并且每個對象都提供了很多方法與屬性；
• BOM缺乏標準，JavaScript語法的標準化組織是ECMA，DOM的標準化組織是W3C，BOM最初是Netscape瀏覽器標準的一部分

二、window對象

• 瀏覽器里面，window對象指當前的瀏覽器窗口。
• 它也是當前頁面的頂層對象，即最高一層的對象，所有其他對象都是它的下屬。
• 一個變量如果未聲明，那么默認就是頂層對象的屬性。

1、Window的屬性

　　1.1??window.name 屬性是一個字符串，表示當前瀏覽器窗口的名字。窗口不一定需要名字，這個屬性主要配合超鏈接和表單的target屬性使用

　　1.2?window.closed，window.opener

　　(1)?window.closed屬性返回一個布爾值，表示窗口是否關閉

　　(2)?window.opener屬性表示打開當前窗口的父窗口。如果當前窗口沒有父窗口（即直接在地址欄輸入打開），則返回null

　　1.3?window.self和window.window屬性都指向窗口本身。這兩個屬性只讀

window.self === window // true
window.window === window // true

?　　1.4?window.frames屬性返回一個類似數組的對象，成員為頁面內所有框架窗口，包括frame元素和iframe元素。window.frames[0]表示頁面中第一個框架窗口

• 如果iframe元素設置了id或name屬性，那么就可以用屬性值，引用這個iframe窗口。比如<iframe name="myIFrame">可以用frames['myIFrame']或者frames.myIFrame來引用
• frames屬性實際上是window對象的別名
• window.length屬性返回當前網頁包含的框架總數。如果當前網頁不包含frame和iframe元素，那么window.length就返回0

frames === window // true
window.frames.length === window.length // true

　　1.5?window.frameElement屬性主要用于當前窗口嵌在另一個網頁的情況（嵌入<object>、<iframe>或<embed>元素），返回當前窗口所在的那個元素節點。如果當前窗口是頂層窗口，或者所嵌入的那個網頁不是同源的，該屬性返回null。

// HTML 代碼如下
// <iframe src="about.html"></iframe>// 下面的腳本在 about.html 里面
var frameEl = window.frameElement;
if (frameEl) {frameEl.src = 'other.html';
}
上面代碼中，frameEl變量就是<iframe>元素。

?

　　1.6? ?window.top屬性指向最頂層窗口，主要用于在子窗口里面獲取頂層的父窗口。

　　　　window.parent屬性指向父窗口。如果當前窗口沒有父窗口，window.parent指向自身

　　1.7?window.devicePixelRatio屬性返回一個數值，表示一個 CSS 像素的大小與一個物理像素的大小之間的比率。也就是說，它表示一個 CSS 像素由多少個物理像素組成。它可以用于判斷用戶的顯示環境，如果這個比率較大，就表示用戶正在使用高清屏幕，因此可以顯示較大像素的圖片

　　1.8?window對象的位置信息和大小信息

　　（1）window.screenX和window.screenY屬性，返回瀏覽器窗口左上角相對于當前屏幕左上角的水平距離和垂直距離（單位像素）。這兩個屬性只讀

　　（2）window.innerHeight和window.innerWidth屬性，返回網頁在當前窗口中可見部分的高度和寬度，即“視口”（viewport）的大小（單位像素）。這兩個屬性只讀

　　（3）window.outerHeight和window.outerWidth屬性返回瀏覽器窗口的高度和寬度，包括瀏覽器菜單和邊框（單位像素）。這兩個屬性只讀

　　（4）window.scrollX屬性返回頁面的水平滾動距離，window.scrollY屬性返回頁面的垂直滾動距離，單位都為像素。這兩個屬性只讀

　　（5）window.pageXOffset屬性和window.pageYOffset屬性，是window.scrollX和window.scrollY別名

　　1.9?window.isSecureContext屬性返回一個布爾值，表示當前窗口是否處在加密環境。如果是 HTTPS 協議，就是true，否則就是false

?2、window對象的方法

　　2.1 window.alert()??方法彈出的對話框，只有一個“確定”按鈕，往往用來通知用戶某些信息

　　2.2?window.confirm()方法彈出的對話框，除了提示信息之外，只有“確定”和“取消”兩個按鈕，往往用來征詢用戶是否同意

　　2.3?window.prompt()方法彈出的對話框，提示文字的下方，還有一個輸入框，要求用戶輸入信息，并有“確定”和“取消”兩個按鈕。它往往用來獲取用戶輸入的數據

　　2.4?window.open方法用于新建另一個瀏覽器窗口，類似于瀏覽器菜單的新建窗口選項。它會返回新窗口的引用，如果無法新建窗口，則返回null　　

window.open(url, windowName, [windowFeatures])

?

• url：字符串，表示新窗口的網址。如果省略，默認網址就是about:blank。
• windowName：字符串，表示新窗口的名字。如果該名字的窗口已經存在，則占用該窗口，不再新建窗口。如果省略，就默認使用_blank，表示新建一個沒有名字的窗口。
• windowFeatures：字符串，內容為逗號分隔的鍵值對（詳見下文），表示新窗口的參數，比如有沒有提示欄、工具條等等。如果省略，則默認打開一個完整 UI 的新窗口。如果新建的是一個已經存在的窗口，則該參數不起作用，瀏覽器沿用以前窗口的參數。

　　2.5?window.close方法用于關閉當前窗口，一般只用來關閉window.open方法新建的窗口

　　2.6?window.stop()方法完全等同于單擊瀏覽器的停止按鈕，會停止加載圖像、視頻等正在或等待加載的對象

　　2.7?window.moveTo()方法用于移動瀏覽器窗口到指定位置。它接受兩個參數，分別是窗口左上角距離屏幕左上角的水平距離和垂直距離，單位為像素

　　2.8?window.moveBy方法將窗口移動到一個相對位置。它接受兩個參數，分布是窗口左上角向右移動的水平距離和向下移動的垂直距離，單位為像素

　　2.9?window.resizeTo()方法用于縮放窗口到指定大小。

　　2.10?window.scrollTo方法用于將文檔滾動到指定位置。它接受兩個參數，表示滾動后位于窗口左上角的頁面坐標

　　window.scrollTo(options)

• top：滾動后頁面左上角的垂直坐標，即 y 坐標。
• left：滾動后頁面左上角的水平坐標，即 x 坐標。
• behavior：字符串，表示滾動的方式，有三個可能值（smooth、instant、auto），默認值為auto

　　2.11?window.print方法會跳出打印對話框，與用戶點擊菜單里面的“打印”命令效果相同。

　　2.12?window.focus()方法會激活窗口，使其獲得焦點，出現在其他窗口的前面

　　2.13?window.blur()方法將焦點從窗口移除

　　2.14?window.getSelection方法返回一個Selection對象，表示用戶現在選中的文本

　　2.15?window.getComputedStyle()方法接受一個元素節點作為參數，返回一個包含該元素的最終樣式信息的對象

　　2.16?window.matchMedia()方法用來檢查 CSS 的mediaQuery語句

三 、Navigator 對象

　　window.navigator屬性指向一個包含瀏覽器信息的 Navigator 對象。腳本通過這個屬性了解用戶使用的是哪一種瀏覽器

　　1、navigator.userAgent屬性返回瀏覽器的 User Agent 字符串，表示瀏覽器的廠商和版本信息

navigator.userAgent
// "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1547.57 Safari/537.36"

?

　　通過userAgent屬性識別瀏覽器，用戶可以改變這個字符串通過userAgent可以大致準確地識別手機瀏覽器，方法就是測試是否包含mobi字符串/mobi|android|touch|mini/i.test(ua)

var ua = navigator.userAgent.toLowerCase();if (/mobi/i.test(ua)) {// 手機瀏覽器
} else {// 非手機瀏覽器
}

　　2、Navigator.plugins屬性返回一個類似數組的對象，成員是 Plugin 實例對象，表示瀏覽器安裝的插件，比如 Flash、ActiveX 等

var pluginsLength = navigator.plugins.length;for (var i = 0; i < pluginsLength; i++) {console.log(navigator.plugins[i].name);console.log(navigator.plugins[i].filename);console.log(navigator.plugins[i].description);console.log(navigator.plugins[i].version);
}

　　3、Navigator.platform屬性返回用戶的操作系統信息，比如MacIntel、Win32、Linux x86_64等

navigator.platform
// "Linux x86_64"

　　4、navigator.onLine屬性返回一個布爾值，表示用戶當前在線還是離線（瀏覽器斷線）。

　　有時，瀏覽器可以連接局域網，但是局域網不能連通外網。這時，有的瀏覽器的onLine屬性會返回true，所以不能假定只要是true，用戶就一定能訪問互聯網。不過，如果是false，可以斷定用戶一定離線。

navigator.onLine // true

?

　　5、Navigator.language屬性返回一個字符串，表示瀏覽器的首選語言。該屬性只讀。

　　　　Navigator.languages屬性返回一個數組，表示用戶可以接受的語言。　　

navigator.language // "en"
navigator.languages  // ["en-US", "en", "zh-CN", "zh", "zh-TW"]

?

　　6、Navigator.geolocation屬性返回一個 Geolocation 對象，包含用戶地理位置的信息。注意，該 API 只有在 HTTPS 協議下可用，否則調用下面方法時會報錯

• Geolocation.getCurrentPosition()：得到用戶的當前位置
• Geolocation.watchPosition()：監聽用戶位置變化
• Geolocation.clearWatch()：取消watchPosition()方法指定的監聽函數

　　7、Navigator.cookieEnabled屬性返回一個布爾值，表示瀏覽器的 Cookie 功能是否打開

　　 8、Navigator.javaEnabled()方法返回一個布爾值，表示瀏覽器是否能運行 Java Applet 小程序

?四、History對象

　　window.history屬性指向 History 對象，它表示當前窗口的瀏覽歷史

　　1、屬性

?

　　（1）History.length：當前窗口訪問過的網址數量

　　（2）History.state：History 堆棧最上層的狀態值

　　2、方法

• History.back()：移動到上一個網址，等同于點擊瀏覽器的后退鍵。對于第一個訪問的網址，該方法無效果。
• History.forward()：移動到下一個網址，等同于點擊瀏覽器的前進鍵。對于最后一個訪問的網址，該方法無效果。
• History.go()：接受一個整數作為參數，以當前網址為基準，移動到參數指定的網址，比如go(1)相當于forward()，go(-1)相當于back()。如果參數超過實際存在的網址范圍，該方法無效果；如果不指定參數，默認參數為0，相當于刷新當前頁面
• history.go(0)相當于刷新當前頁面。

　　2.1?History.pushState()方法用于在歷史中添加一條記錄

window.history.pushState(state, title, url)

• state：一個與添加的記錄相關聯的狀態對象，主要用于popstate事件。該事件觸發時，該對象會傳入回調函數。也就是說，瀏覽器會將這個對象序列化以后保留在本地，重新載入這個頁面的時候，可以拿到這個對象。如果不需要這個對象，此處可以填null。
• title：新頁面的標題。但是，現在所有瀏覽器都忽視這個參數，所以這里可以填空字符串。
• url：新的網址，必須與當前頁面處在同一個域。瀏覽器的地址欄將顯示這個網址。

　　2.2?History.replaceState()方法用來修改 History 對象的當前記錄，其他都與pushState()方法一模一樣

history.pushState({page: 1}, 'title 1', '?page=1')
// URL 顯示為 http://example.com/example.html?page=1
history.pushState({page: 2}, 'title 2', '?page=2');
// URL 顯示為 http://example.com/example.html?page=2
history.replaceState({page: 3}, 'title 3', '?page=3');
// URL 顯示為 http://example.com/example.html?page=3
history.back()
// URL 顯示為 http://example.com/example.html?page=1
history.back()
// URL 顯示為 http://example.com/example.html
history.go(2)
// URL 顯示為 http://example.com/example.html?page=3

?

　　3、popstate 事件

　　每當同一個文檔的瀏覽歷史（即history對象）出現變化時，就會觸發popstate事件

　　僅僅調用pushState()方法或replaceState()方法 ，并不會觸發該事件，只有用戶點擊瀏覽器倒退按鈕和前進按鈕，或者使用 JavaScript 調用History.back()、History.forward()、History.go()方法時才會觸發。另外，該事件只針對同一個文檔，如果瀏覽歷史的切換，導致加載不同的文檔，該事件也不會觸發

window.onpopstate = function (event) {console.log('location: ' + document.location);console.log('state: ' + JSON.stringify(event.state));
};// 或者
window.addEventListener('popstate', function(event) {console.log('location: ' + document.location);console.log('state: ' + JSON.stringify(event.state));
});

?

　　回調函數的參數是一個event事件對象，它的state屬性指向pushState和replaceState方法為當前 URL 所提供的狀態對象（即這兩個方法的第一個參數）。上面代碼中的event.state，就是通過pushState和replaceState方法，為當前 URL 綁定的state對象

var currentState = history.state;

?

　　4、URLSearchParams API

五、瀏覽器數據儲存機制

　　Storage 接口用于腳本在瀏覽器保存數據。兩個對象部署了這個接口：window.sessionStorage和window.localStorage

　　1、Storage.setItem()方法用于存入數據。它接受兩個參數，第一個是鍵名，第二個是保存的數據

window.sessionStorage.setItem('key', 'value');
window.localStorage.setItem('key', 'value');

?

　　2、Storage.getItem()方法用于讀取數據。它只有一個參數，就是鍵名。如果鍵名不存在，該方法返回null

window.sessionStorage.getItem('key')
window.localStorage.getItem('key')

　　3、Storage.clear()方法用于清除所有保存的數據。該方法的返回值是undefined。

window.sessionStorage.clear()
window.localStorage.clear()

　　4、Storage.key()接受一個整數作為參數（從零開始），返回該位置對應的鍵值。

window.sessionStorage.setItem('key', 'value');
window.sessionStorage.key(0) // "key"for (var i = 0; i < window.localStorage.length; i++) {console.log(localStorage.key(i));
}

　　5、Storage 接口儲存的數據發生變化時，會觸發 storage 事件，可以指定這個事件的監聽函數。

window.addEventListener('storage', onStorageChange);

?

　　監聽函數接受一個event實例對象作為參數。這個實例對象繼承了 StorageEvent 接口，有幾個特有的屬性，都是只讀屬性。

• StorageEvent.key：字符串，表示發生變動的鍵名。如果 storage 事件是由clear()方法引起，該屬性返回null。
• StorageEvent.newValue：字符串，表示新的鍵值。如果 storage 事件是由clear()方法或刪除該鍵值對引發的，該屬性返回null。
• Storage.oldValue：字符串，表示舊的鍵值。如果該鍵值對是新增的，該屬性返回null。
• Storage.storageArea：對象，返回鍵值對所在的整個對象。也說是說，可以從這個屬性上面拿到當前域名儲存的所有鍵值對。
• Storage.url：字符串，表示原始觸發 storage 事件的那個網頁的網址。

function onStorageChange(e) {console.log(e.key);
}
window.addEventListener('storage', onStorageChange);

?