JavaScript之BOM location物件+navigator物件+history 物件
目錄
- 一、location物件
- 1、URL
- 2、location 物件的屬性
- 3、location 物件的方法
- 二、navigator物件
- 三、history物件
前言：
window 物件給我們提供了一個 location 屬性用於獲取或設定窗體的 URL，並且可以用於解析 URL 。 因為這個屬性返回的是一個物件，所以我們將這個屬性也稱為 location 物件。
接下來我們就具體的看一下。
一、location物件
1、URL
統一資源定位符 (Uniform Resource Locator,URL) 是網際網路上標準資源的地址。網際網路上的每個檔案都有一個唯一的 URL，它包含的資訊指出檔案的位置以及瀏覽器應該怎麼處理它。
URL的一般語法格式為：
protocol://host[:port]/path/[?query]#fragment
http://www.itcast.cn/index.html?name=andy&age=18#link
2、location 物件的屬性
我們可以通過這些屬性得到位址列中對應的資訊，舉個例子：
比如：在csdn首頁，開啟我們的開發者工具–>控制檯，輸入location,就會出現location物件的很多屬性和返回值：
或者我們直接在控制檯輸入對應的屬性，就可以拿到對應的返回值。
比如我們現在做一個點選按鈕跳轉頁面的效果：
<body>
<button>跳轉</button>
<div></div>
<script>
var btn = document.querySelector('button');
var div = document.querySelector('div');
var timer = 5;
btn.addEventListener('click',function(){
time()
})
var time = setInterval(function(){
if(timer == 0) {
this.location.href = 'https://www.baidu.com'
}
else{
div.innerHTML = '頁面將在'+timer+'秒後跳轉'
timer--;
}
},1000);
</script>
</body>
執行結果為：
3、location 物件的方法
例如，我們也可以通過使用location物件方法來實現跳轉頁面：
<button>點選跳轉</button>
<script>
var btn = document.querySelector('button');
btn.addEventListener('click',function(){
location.assign('https://www.baidu.com')
})
</script>
location.assign() 這種方法實現的跳轉是可以後退頁面，但是 location.replace() 因為不記錄歷史，所以不能後退頁面。
二、navigator物件
navigator 物件包含有關瀏覽器的資訊，它有很多屬性，我們最常用的是 userAgent，該屬性可以返回由客戶機發送伺服器的 user-agent 頭部的值。
if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad||Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
window.location.href = ""; //手機
} else {
window.location.href = ""; //電腦
}
三、history物件
window 物件給我們提供了一個 history 物件，與瀏覽器歷史記錄進行互動。該物件包含使用者（在瀏覽器視窗中）訪問過的 URL。
它最常用的方法有以下三個：
| history物件方法 | 作用 |
|---|---|
| back（） | 可以後退功能 |
| forward() | 前進功能 |
| go(引數) | 前進後退功能 引數如果是1，前進一個頁面 如果是-1 後退一個頁面 |
比如我們現在有連個頁面，想要通過一個按鈕實現前進後退功能，可以分別給兩個頁面的按鈕繫結forward方法和history方法，如下所示：
<body>
<a href="list.html" rel="external nofollow" >去到列表頁面</a>
<button>前進</button>
<script>
var btn = document.querySelector('button');
btn.addEventListener('click',function(){
history.forward()
})
</script>客棧;
</body>
<body>
<http://www.cppcns.coma href="index.html" rel="external nofollow" >返回主頁面</a>
<button>後退</button>
<script>
var btn = document.querySelector('button');
btn.addEventListener('click',function(){
history.back()
})
</script>
</body>
實現效果為：
或者我們也可以使用history.go(1)實現前進功能；用history.go(1)實現後http://www.cppcns.com退功能。
到此這篇關於之http://www.cppcns.comBOM location物件+navigator物件+history 物件的文章就介紹到這了,更多相關 location物件+navigator物件+history 物件內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！