BOM瀏覽器對象模型
location對象
window對象給我們提供了一個location屬性用于獲取或設(shè)置窗體的URL钦听，并且可以用于解析URL逾柿。因為這個屬性返回的是一個對象怕膛，所以我們將這個屬性也稱為location對象
URL
URL:統(tǒng)一資源定位符(Uniform Resource Locator,URL)是互聯(lián)網(wǎng)上標(biāo)準(zhǔn)資源的地址熟嫩。互聯(lián)網(wǎng)上的每個文件都有一個唯一的URL褐捻，他包含的信息指出文件的位置以及瀏覽器應(yīng)該怎么處理它掸茅。
語法格式：
protocol://host[:port]/path/[?query]#fragment
- 例如：
http://www.baidu.com/index.html?name=andy&age=18#link
URL組成說明
| 組成 | 說明 |
|---|---|
protocol |
通信協(xié)議 常用的http、ftp柠逞、maito等 |
host |
主機(jī)(域名) www.baidu.com
|
port |
端口號(可選) 省略是使用方案的默認(rèn)端口 如http的默認(rèn)端口是80 |
path |
路徑 由零到多個/符號隔開的字符串昧狮，一般用來表示主機(jī)上的一個目錄或文件地址 |
query |
參數(shù) 以鍵值對的形式通過&符號分隔開來 |
fragment |
片段 #后面內(nèi)容 常見于鏈接、錨點 |
location對象常用的屬性
location對象屬性值 |
返回值 |
|---|---|
location.href |
獲取或設(shè)置整個URL
|
location.host |
返回主機(jī)(域名) www.baidu.com
|
location.port |
返回端口號板壮，如果沒寫返回空字符串 |
location.pathname |
返回路徑 |
location.search |
返回參數(shù) |
location.hash |
返回片段 #后面內(nèi)容 常見于鏈接逗鸣、錨點 |
location對象常用的方法
location對象方法 |
返回值 |
|---|---|
location.assign() |
跟href一樣，可以跳轉(zhuǎn)頁面(也稱為重定向頁面) |
location.replace() |
替換當(dāng)前頁面绰精，因為不記錄歷史撒璧，所以不能后退頁面 |
location.reload() |
重新加載頁面，相當(dāng)于刷新按鈕或者F5 如果參數(shù)是true 強(qiáng)制刷新ctrl+F5
|
<button>點擊跳轉(zhuǎn)</button>
<script>
let btn = document.querySelector('button');
btn.addEventListener('click', function() {
// 記錄瀏覽歷史笨使，可以實現(xiàn)后退功能
location.assign('http://www.baidu.com');
// 不記錄瀏覽歷史卿樱，不能實現(xiàn)后退功能
location.replace('http://www.baidu.com');
// 刷新頁面 不寫或者默認(rèn)參數(shù)為false，刷新頁面 參數(shù)true強(qiáng)制刷新硫椰，相當(dāng)于ctrl+F5
location.reload();
})
</script>
navigator對象
navigator對象包含有關(guān)瀏覽器的信息繁调，它有很多屬性，我們常用的是userAgent,該屬性可以返回由客戶端發(fā)送到服務(wù)器的user-agent頭部的值
history對象
window對象給我們提供了一個history對象靶草，與瀏覽器歷史記錄進(jìn)行交互蹄胰，該對象包含用戶(在瀏覽器窗口中)訪問過的URL
history對象方法 |
作用 |
|---|---|
back() |
后退功能 |
forward() |
前進(jìn)功能 |
go(參數(shù)) |
前進(jìn)后退功能，參數(shù)如果是1前進(jìn)一個頁面爱致，如果是-1后退一個頁面 |
history對象一般在實際開發(fā)中比較少用烤送，但會在一些OA辦公系統(tǒng)中見到
