JavaScript瀏覽器對象模型BOM

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

開發工具與關鍵技術：Adobe Dreamweaver JavaScript

作者：陳鈺桃

撰寫時間：2020年4月28日

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

一、什么是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 (Window 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 3.5.30729;InfoPath.3)

????????????? IE9 中的userAgent

????????????? ?? Mozilla/5.0 (compatible; MSIE 9.0; Windows 10.0; WOW64; Trident/7.0; .NET4.0C; .NETC.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; InfoPath.3)

????????????? IE10 中的userAgent

????????????? ?? Mozilla/5.0 (Windows NT 10.0;WOW64; Trident/7.0; .NET4.0C;.NET4.0E; .NET CLR 2.0.50727; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .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

如果通過navigator.userAgent不能判斷，還可以通過一些瀏覽器中特有的對象，來判斷瀏覽器信息

?????? ?? 比如：ActiveXObject

三、History

?????? ??? - 對象可以用來操作瀏覽器向前或向后翻頁

????????????? - length 返回瀏覽器歷史列表中的 UPL 數量。

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 (查詢部分)。

assign()

???????????????????? ??? - 用來跳轉到其他的頁面，作用和直接修改location一樣

reload()

???????????????????? ???? - 重新加載當前文檔，作用和刷新按鈕一樣

??????????????????????????? ?- 如果在方法中傳遞一個ture作為參數，則會強制清空緩存刷新頁面

replace()

???????????????????? ????? - 用新的文檔替換當前文檔，調用完畢也會跳轉頁面

??????????????????????????? ???? - 不會生成歷史記錄，不能使用回退按鈕回退

總結

以上是生活随笔為你收集整理的JavaScript浏览器对象模型BOM的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。