浏览器对象模型BOM学习
BOM
- 瀏覽器對象模型
- BM可以使我們通過JS來操作瀏覽器
- 在BOM中為我們提供了一組對象,用來完成對瀏寬器的操作
- B0M對象
- Window
- 代表的是整個瀏覽器的窗口，同時window也是網(wǎng)頁中的全局對象
- 其他對象都是該對象的屬性，其他對象可以直接獲取，也可以通過window對象獲取
- Navigator
- 代表的當前瀏覽器的信息，通過該對象可以來識別不同的瀏覽器
- Location
- 代表當前瀏覽器的地址欄信息，通過Location可以獲取地址欄信息，或者操作瀏覽器跳轉(zhuǎn)頁面
- History
- 代表瀏覽器的歷史記錄，可以通過該對象來操作瀏覽器的歷史記錄；
- 由于隱私原因，該對象不能獲取到具體的歷史記錄，只能操作瀏覽器向前或向后翻頁。而且干操作只在當次訪問時有效
- Screenl
- 代表用戶的屏幕的信息，通過該對象可以獲取到用戶的顯示器的相關(guān)信息。
- Window
Navigator
- 代表的當前器的信息,通過該對象可以來識別不同的覽器
- 由于歷史原因, Navigator對象中的大部分屬性都已經(jīng)不能幫助我們識別瀏覽器了
- 一般我們只會使用 userAgent家判斷瀏覽器的信息
hbuilder內(nèi)置瀏覽器的userAgent信息：
Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.119 Safari/537.36 HBuilderX
火狐瀏覽器的userAgent信息：
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:79.0) Gecko/20100101 Firefox/79.0
Chrome瀏覽器的userAgent信息：
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.105 Safari/537.36
IE11
Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; Touch; .NET4.0C; .NET4.0E; Tablet PC 2.0; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; Zoom 3.6.0; rv:11.0) like Gecko
在IE11中已經(jīng)將微軟和IE相關(guān)的表示都丟掉了，所以不能通過userAgent屬性來識別一個瀏覽器是否是IE了。
IE8
Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 10.0; WOW64; Trident/7.0; Touch; .NET4.0C; .NET4.0E; Tablet PC 2.0; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; Zoom 3.6.0)
History
| length | 返回歷史列表中的網(wǎng)址數(shù) |
| back() | 加載 history 列表中的前一個 URL |
| forward() | 加載 history 列表中的下一個 URL |
| go() | 加載 history 列表中的某個具體頁面 |
a、back() – forward()
可以用來回退到上一個頁面，作用和瀏覽器的回退按鈕一樣
<button>按鈕</button> <script>var btn = document.getElementsByTagName("button")[0];var history = window.history;btn.onclick = function() {// history.back();// history.forward()} </script>b、go()
可以用來跳轉(zhuǎn)到指定的頁面；
需要一個整數(shù)作為參數(shù)
- 1：表示向前跳轉(zhuǎn)一個頁面
- 2：表示向前跳轉(zhuǎn)兩個頁面
- …
- -1：表示向后跳轉(zhuǎn)一個頁面
- -2：表示向后跳轉(zhuǎn)兩個頁面
- …
Location
| hash | 返回一個URL的錨部分 |
| host | 返回一個URL的主機名和端口 |
| hostname | 返回URL的主機名 |
| href | 返回完整的URL |
| pathname | 返回的URL路徑名。 |
| port | 返回一個URL服務(wù)器使用的端口號 |
| protocol | 返回一個URL協(xié)議 |
| search | 返回一個URL的查詢部分 |
| assign() | 載入一個新的文檔 |
| reload() | 重新載入當前文檔 |
| replace() | 用新的文檔替換當前文檔 |
查看屬性：
var btn = document.getElementsByTagName("button")[0]; var loca = window.location; btn.onclick = function() {console.log(loca.href);console.log(loca); }如果直接將location屬性修改為一個完整的路徑或相對路徑，則頁面會自動跳轉(zhuǎn)到該路徑，冰球會生成相應(yīng)的歷史記錄。
window.location = "https://www.baidu.com/";方法：
a、assign()
用來跳轉(zhuǎn)到其他頁面，作用和直接修改locating一樣
window.location.assign("https://www.baidu.com/")b、reload()
用于重新加載當前頁面，作用和刷新按鈕一樣
如果在方法中傳遞一個true 作為參數(shù)，則會強制清空緩存刷新頁面。如果把該方法的參數(shù)設(shè)置為 true，那么無論文檔的最后修改日期是什么，它都會繞過緩存，從服務(wù)器上重新下載該文檔。這與用戶在單擊瀏覽器的刷新按鈕時按住 Shift 健的效果是完全一樣。
window.location.reload(true)c、replace()
可以使用一個新的頁面替換當前頁面，調(diào)用完畢也會跳轉(zhuǎn)頁面，
但是不會生成歷史記錄，不能使用回退按鈕回退頁面
window.location.replace("https://www.baidu.com/")定時器
定時器方法是window的方法，可以使用window獲取到。
| clearInterval() | 取消由 setInterval() 設(shè)置的 timeout。 |
| clearTimeout() | 取消由 setTimeout() 方法設(shè)置的 timeout。 |
| setInterval() | 按照指定的周期（以毫秒計）來調(diào)用函數(shù)或計算表達式。 |
| setTimeout() | 在指定的毫秒數(shù)后調(diào)用函數(shù)或計算表達式。 |
a、間隔調(diào)用
var count=0; // 該方法會返回一個唯一的定時器標識 // 參數(shù)有兩個： // 1、回調(diào)函數(shù) // 2、調(diào)用回調(diào)函數(shù)的間隔，以毫秒為單位 var timer = setInterval(function(){document.write(count++); },1000) btu.onclick = function() {// clearInterval()方法可以用來關(guān)閉一個定時器，但是要傳入一個定時器的標識作為參數(shù)clearInterval(timer); }b、超時調(diào)用
var btn = document.getElementsByTagName("button")[0]; // 該方法會返回一個唯一的定時器標識 // 參數(shù)有兩個： // 1、回調(diào)函數(shù) // 2、調(diào)用回調(diào)函數(shù)的間隔，以毫秒為單位 // setTimeout() var timer = setTimeout(function() {alert("被調(diào)用了"); }, 1000) btu.onclick = function() {// clearTimeout()方法可以用來關(guān)閉一個定時器，但是要傳入一個定時器的標識作為參數(shù)clearTimeout(timer); }總結(jié)
以上是生活随笔為你收集整理的浏览器对象模型BOM学习的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 杭州云栖·2050大会-团聚召集人手册
- 下一篇： apache实验报告 linux_apa