前端，你真的知道BOM的這些用法嗎？

BOM

一. BOＭ簡介&寫做背景

BOM簡介

BOM：Broswer Object Model 瀏覽器對象模型

在JavaScript中能夠大概的理解爲，就是window對象，用來進行與瀏覽器相關的一些操做

學習BOM就是學習 JavaScript中的window對象

寫做背景

看過 《你不知道的JavaScript》 的小夥伴都知道，書中有個這樣的公式 JavaScript = ES + DOM + BOM

ES 和 DOM都是咱們耳熟能詳的，在平常的開發中也是這樣，絕大部分時間都在使用 ES + DOM的語法進行編程。BOM偶爾會用一下，忽然想寫這一篇筆記的原因是由於前幾天差點由於這一塊知識的不熟悉，形成一個生產bug，好在線上測試的時候被測試同窗發現了，否則得背大鍋。

通過這樣一個事件，本身也在腦海裏回憶了一些，對這一塊的知識也是剛入門的時候，系統的過了一遍，大部分的知識都遺忘的差很少，甚至有時候須要用到的時候，百度關鍵詞都有點費勁。綜上所述，就頗有必要把這一塊的知識從新學習一遍，加深記憶的同時，造成本身的筆記產出。

注：本系列文章是我的複習及提高類型筆記，簡單的例子和概念不會展開說明，重點記錄關鍵信息和重要概念，請知悉

二. window對象

BOM的核心對象是 window，它表明瀏覽器的一個實例。

在瀏覽器中，window有着雙重的角色：JavaScript訪問瀏覽器的接口對象，ES中的Global對象

這意味着網頁中的任何一個對象，變量，函數都是以window做爲其Global對象

​ -- 《JavaScript高級程序設計》

通俗來說就是，網頁中的全部變量，對象，函數等，最終都是window對象的子屬性

2.1 全局做用域

在ECMAScript中，window對象扮演着Global對象的角色，也就是說，全部在全局做用域聲明的變量，函數都會變成window的屬性和方法，均可以經過 window.屬性名（或方法名） 直接調用

如下幾點須要注意

• 使用 window.attr 聲明的變量和 var 聲明的變量有個區別，使用 var 聲明的變量，不能使用 delete 刪除，使用 window. 聲明的變量能夠被刪除
• 在JavaScript中，嘗試使用未聲明的變量會拋出錯誤，可是經過 window 對象查詢未聲明的變量，只會返回 undefined

2.2 導航和打開窗口

經過 window.open() 既能夠導航到一個特定的URL，也能夠打開一個新的瀏覽器窗口

該函數接收四個參數：

• URL
• 窗口目標
• 一個新窗口的特性字符串，例：'height=400,width=400,top=10,left=10,resizable=yes'
• 布爾值，是否取代當前頁面（僅在不打開新窗口的時候有效）

若是 window.open() 傳遞了第二個參數，且該參數是已有窗口或者框架的名稱，那麼就會在目標窗口加載第一個參數指定的URL

// 若是存在topFrame窗口，則在topFrame窗口打開指定url,不然新建立一個窗口並命名爲topFrame

window.open('htttp://www.maxiaofei.com','topFrame')
==> <a href="http://www.maxiaofei.com" target="topFrame"></a>
複製代碼

window.open() 會返回新窗口的引用，也就是新窗口的 window 對象

var myWin = window.open('http://www.maxiaofei.com','myWin')
複製代碼

window.close() 僅用於經過 window.open() 打開的窗口

新建立的 window 對象有一個 opener 屬性，該屬性指向打開他的原始窗口對象

三. location對象

注: window.location 和 document.location 引用的是同一個對象。location 既是 window 對象的屬性，也是 document 對象的屬性

3.1 location對象的屬性

以該url舉例：http://www.baidu.com:8080/web/javascript/test.js#12345?a=10&b=20

屬性名	例子	說明
hash	#12345	utl中#後面的字符，沒有則返回空串
host	www.baidu.com:80	服務器名稱和端口號
hostname	www.baidu.com	域名，不帶端口號
href	www.baidu.com:8080/web/javascr…	完整url
pathname	web/javascript/test.js	服務器下面的文件路徑
port	8080	url的端口號，沒有則爲空
protocol	http	使用的協議
search	?a=10&b=20	url的查詢字符串，一般爲？後面的內容

3.2 自定義查詢字符串參數返回對象

//假設當前URL：'http://www.maxiaofei.com/Web/test.js?name=mafei&age=24&sex=m'

function getQueryObj(){
    let location = window.location;
    let queryStr = location.search.length > 0 ? location.search.substring(1) : '';
    let obj = {},item;
    let queryArr = queryStr.length > 0 ? queryStr.split('&') : []
    
    for(let i=0;i<queryArr.length;i++){
        item = queryArr[i].split('=');
        obj[item[0]] = item[1]
    }

    return obj
}

getQueryObj()
//=》{
    name: 'maxiaofei',
    age: 24,
    sex: 'm'
}
複製代碼

3.3 修改location

每次修改 location 的 hash　之外的任何屬性，頁面都會以新URL從新加載

window.location = 'http://www.maxiaofei.com'

location.search = '?name=mafei&age=18'

location.hostname = 'www.baidu.com'

location.pathname = 'web/html/a.html'

location.port = '1234'
複製代碼

除了 hash 值之外的任何修改，都會在瀏覽器的歷史記錄中生成一條新的記錄，能夠經過瀏覽器的回退按鈕導航到前一個頁面，能夠經過 replace() 方法禁止這種行爲，使用 replace 打開的頁面，不能返回到前一個頁面

// 嘗試在瀏覽器控制檯輸入以下代碼，瀏覽器將不支持回退
location.replace('http://www.baidu.com')
複製代碼

3.4 從新加載

經過 location.reload() 方法能夠從新加載頁面

• location.reload() : 從新加載（有可能會從緩存中加載）
• location.reload(true)： 從新加載（從服務器從新加載）

四. navigator對象

navigator 對象主要用來獲取瀏覽器的屬性，區分瀏覽器類型

navigator 對象屬性較多，且兼容性比較複雜，點擊瞭解更多navigator屬性

五. history對象

history 對象保存着用戶上網的歷史記錄，從窗口被打開的那一刻算起，由於 history 是 window 對象的屬性，所以每一個瀏覽器窗口，每一個標籤乃至每一個框架，都有本身的 history對象與特定的 window 對象關聯

​ -- 《JavaScript高級程序設計》

history 經常使用的有以下3個方法和一個屬性

1. history.go()

• 接收一個整數數字或者字符串參數：向最近的一個記錄中包含指定字符串的頁面跳轉

history.go('maixaofei.com')		//向前或者向後尋找指定字符串頁面，沒有找到則無響應
複製代碼

• 當參數爲整數數字的時候，正數表示向前跳轉指定的頁面，負數爲向後跳轉指定的頁面

history.go(3)	//向前跳轉三個記錄
history.go(-1)	//向後跳轉一個記錄
複製代碼

2. history.forward()

• 向前跳轉一個頁面

3. history.back()

• 向後跳轉一個頁面

4. history.length

• 獲取歷史記錄數，若是是打開的第一個頁面，則 history.length == 0，能夠用該屬性來判斷當前打開的網頁是否是該窗口打開的首個網頁

總結

本文主要介紹了瀏覽器對象模型（BOM）中幾個經常使用的對象，主要包括 navigator，window, location, history

1. window既是 JavaScript 的全局對象，也是BOM的一個實例，全部的全局方法，屬性，BOM中的屬性，均可以經過 window. 來調用
2. window做爲BOM的實例，最經常使用的幾個方法分別是：window.open()，window.close()，，分別用來打開和關閉瀏覽器窗口頁面，這裏須要注意的是，經過 open 方法打開的頁面，才能經過close 方法關閉
3. location對象也是用的比較多的一個BOM對象，主要用來操做URL相關的一些信息，除了修改 Hash 以外的任何屬性，頁面都會從新加載，歷史記錄會多加一條歷史記錄
4. location對象還有一個 reload() 方法用於手動從新加載頁面，該方法接收一個可選參數，爲 true 的時候表示從服務器從新加載，不然可能從瀏覽器緩存中從新加載頁面
5. location對象 還有一個比較特殊的方法，location.replace()，該方法能夠覆蓋當前頁面並從新加載，同時不會在 history 中生成歷史記錄
6. navigator對象主要用來獲取瀏覽器相關的一些信息，使用的時候須要注意兼容性。能夠用來獲取瀏覽器類（Chrome,safrai,FireFox,Edge,IE）等等
7. history對象主要用來操做瀏覽器URL的歷史記錄，能夠經過參數向前，向後，或者向指定URL跳轉。能夠經過 length 屬性獲取記錄數，判斷當前頁面是不是打開的首個頁面