BOM
- BOM:瀏覽器物件模型 //宿主物件
- BOM 提供了很多物件，用于訪問瀏覽器的功能，這些功能與任何網頁內容無關。
- BOM將瀏覽器中的各個部分轉換成了一個一個的物件，我們通過修改這些物件的屬性，呼叫他們的
方法，從而控制瀏覽器的各種行為
簡單來說：BOM可以使我們通過JS來操作瀏覽器,在BOM中提供了一組物件,用來完成對瀏覽器的操作。
BOM物件：
1.Window物件
- 代表的是整個瀏覽器視窗，同時window也是網頁中的全域物件
2.Navigator物件 （網景公司）
- 代表的當前瀏覽器的資訊，通過該物件可以來識別不同的瀏覽器
3.Location
- 代表當前瀏覽器的地址欄資訊,通過Location可以獲取地址欄資訊,或則操作瀏覽器頁面跳轉
4.History
- 代表瀏覽器的歷史記錄，可以通過該物件來操作瀏覽器的歷史記錄，由于隱私問題，該物件不
能獲取到具體的歷史記錄，只能操作瀏覽器向前或向后翻頁，而且該操作只在當次訪問時有效
5.Screen
- 代表用戶的螢屏的資訊，通過該物件可以獲取到用戶的顯示幕的相關的資訊
這些BOM物件在瀏覽器中都是作為window物件的屬性保存，可以通過window物件來使用，也可以直
接使用
Navigator
- 代表當前瀏覽器的資訊，通過物件可以來識別不同的瀏覽器
- 由于歷史原因，Navigator物件中的部分屬性都是不能幫助我們識別瀏覽器了
- 一般我們只會使用userAgent來判斷瀏覽器的資訊，userAgent是一個字串，這個字串中
包含有用來描述瀏覽器資訊的內容,不同的瀏覽器會有不通過的userAgent
Firefox中的userAgent
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:72.0) Gecko/20100101 Firefox/72.0
Chrome中的userAgent
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko)
Chrome/81.0.4000.3 Safari/537.36
IE8 中的userAgent
Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C；
.NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; InfoPath.3)
IE9 中的userAgent
Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C;
.NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; InfoPath.3)
IE10 中的userAgent
Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C;
.NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; InfoPath.3)
IE11 中的userAgent
Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR
2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; InfoPath.3; rv:11.0) like Gecko
例：根據userAgent判斷瀏覽器
console.log(navigator.userAgent);
var ua = window. navigator.userAgent;
if(/Firefox/i.test(ua)){
alert("火狐瀏覽器");
}else if(/Chrome/i.test(ua)){
alert("谷歌瀏覽器");
}else if(/msie/i.test(ua)){ //IE11中沒有msie
alert("IE瀏覽器");
}else if("ActiveXObject" in window){ //這樣就可以識別IE11了
alert("IE瀏覽器");
}
如果通過navigator.userAgent不能判斷，還可以通過一些瀏覽器中特有的物件，來判斷瀏
覽器的資訊, 比如：ActiveXObject（IE中特有的）
History
- 物件可以用來操作瀏覽器向前后或向后翻頁
- length 回傳瀏覽器歷史串列中的 URL 數量。
History物件的方法：
back() 加載 history 串列中的前一個 URL。
forward() 加載 history 串列中的下一個 URL。
go() 加載 history 串列中的某個具體頁面。
例：go(-1) ==> back()
go(1) ==> forward()
Location
- 該物件中封裝了瀏覽器的地址欄的資訊
/*
Location 物件屬性
屬性 描述
hash 設定或回傳從井號 (#) 開始的 URL（錨）。
host 設定或回傳主機名和當前 URL 的埠號。
hostname 設定或回傳當前 URL 的主機名。
href 設定或回傳完整的 URL。
pathname 設定或回傳當前 URL 的路徑部分。
port 設定或回傳當前 URL 的埠號。
protocol 設定或回傳當前 URL 的協議。
search 設定或回傳從問號 (?) 開始的 URL（查詢部分）。
*/
如果直接列印location，則可以獲取地址欄的資訊（當前頁面的完成路徑）
例：console.log(lacation);
如果直接將location屬性修改為一個完整的路徑或相對路徑,則我們頁面會自動跳轉到該路徑，
并且會生成相對的歷史記錄
例：location="https://www.baidu.com/";
//直接賦值，就等于修改了路徑(相當于把原路徑覆寫了)
assign()
- 用來跳轉到其他的頁面，作用和直接修改location一樣
例：location.assign("https://www.baidu.com/");
reload()
- 重新加載當前檔案,作用和重繪按鈕一樣
- 如果在方法中傳遞一個true作為引數，則會強制清空快取重繪頁面
例：location.reload(true);
replace()
- 用新的檔案替換當前檔案，呼叫完畢也會跳轉頁面
- 不會生成歷史記錄，不能使用回退按鈕回退
例：location.replace("https://www.baidu.com/");
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/56056.html
標籤：非技術區
上一篇：當一個input填充時另一input自動填充相同內容，如何解決？
下一篇：新浪云上線