javaScript之Location,Navigator,History

Location,Navigator,History三個對象是window對象經常使用屬性，

• window.location
• window.navigator
• window.history,window.history屬性它表示當前窗口的瀏覽歷史；

window.location

window.location屬性提供 URL 相關的信息和操做方法。經過window.location和document.location屬性，能夠拿到這個對象。

1. location屬性：

• location.href設置或獲取當前頁面 URL;
• location.protocol設置或獲取當前 URL 的協議，包括冒號（:）;
• location.host設置或獲取當前 URL域名，包括冒號（:）和端口;
• location.hostname設置或獲取當前 URL域名,不包括端口;
• location.port設置或獲取當前 URL端口;
• location.pathname設置或獲取當前 URL路徑部分，從根路徑/開始;
• location.search設置或獲取當前 URL查詢字符串部分，從問號?開始;
• location.hash設置或獲取當前 URL哈希值，從#開始;
• location.origin獲取URL 的協議、域名和端口;

`

// 當前網址爲
// http://www.baidu.com:8080/path/new.html?id=123#anchors
document.location.href
// "http://www.baidu.com:8080/path/new.html?id=123#anchors" // 完整URL
document.location.protocol
// "http:"      // URL 協議
document.location.host
// "www.baidu.com:8080" // URL域名加端口
document.location.hostname
// "www.baidu.com"  // URL域名
document.location.port
// "8080"   // URL端口
document.location.pathname
// "/path/new.html" // URL路徑部分
document.location.search
// "?id=123"    // URL查詢字符串部分，從問號?開始
document.location.hash
// "#anchors"       // 哈希值
document.location.origin
// "http://www.baidu.com:8080"      // 協議、域名和端口
複製代碼

`

在這些屬性裏面，只有origin屬性是隻讀的，其餘屬性均可讀寫，惟一須要特別說明的是location.href設置新的URL後，是當即跳往新地址。

2. location方法

• location.assign()接收一個URL字符串參數，瀏覽器當即跳往這個新地址；
• location.replace()接收一個URL字符串參數，瀏覽器當即跳往這個新地址，用新的文檔替換當前文檔。注意：使用location.replace()跳轉後，是不能夠在回退到原來的頁面，由於在瀏覽器的History裏的記錄是被替換掉的。
• location.reload()從新加載當前頁面;

window.navigator

window.navigator屬性指向一個包含瀏覽器和系統信息的 Navigator 對象。js代碼經過這個屬性瞭解用戶的瀏覽器環境信息。

一： navigator屬性

1. navigator.userAgent返回瀏覽器的 User Agent 字符串，瀏覽器的廠商和版本信息;

`

navigator.userAgent;
//谷歌： Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36
//火狐：Mozilla/5.0 (Windows NT 10.0; WOW64; rv:62.0) Gecko/20100101 Firefox/62.0
//IE：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; rv:11.0) like Gecko
複製代碼

` 經過userAgent也能夠大體準確地識別手機瀏覽器，方法就是檢測當前navigator.userAgent是否包含了mobi字符串。

`

var ua = navigator.userAgent;
	if (/mobile/i.test(ua)) {
		console.log('手機瀏覽器')   // 手機瀏覽器
	} else {
		console.log('非手機瀏覽器')  // 非手機瀏覽器
	}
複製代碼

` 若是想要識別全部移動設備的瀏覽器，能夠測試更多的特徵字符串。

`

/mobile|android|touch|mini/i.test(ua)
複製代碼

`

2. navigator.platform屬性返回用戶的操做系統信息，好比MacIntel、Win3二、Linux x86_64等;

`

navigator.platform
// Win32
複製代碼

`

3. navigator.language，navigator.languagesnavigator.language屬性返回一個字符串，表示瀏覽器的首選語言。該屬性只讀；

`

navigator.language
//  zh-CN
複製代碼

` navigator.languages屬性返回一個數組，表示能夠接受的全部語言。navigator.language老是這個數組的第一個成員。HTTP 請求頭信息的Accept-Language字段，就來自這個數組;

`

navigator.languages
//  [ "zh-CN", "zh", "zh-TW", "zh-HK", "en-US", "en" ]
複製代碼

`

4. navigator.cookieEnabled檢測瀏覽器是否開啓cookie功能，返回一個布爾值。
5. navigator.onLine屬性返回一個布爾值，表示用戶當前在線仍是離線（瀏覽器斷線）。用戶變成在線會觸發online事件，變成離線會觸發offline事件，能夠經過window.ononline和window.onoffline指定這兩個事件的回調函數。

`

window.addEventListener('offline', function(e) { console.log('offline'); });
window.addEventListener('online', function(e) { console.log('online'); });
複製代碼

`

6. navigator.geolocation屬性返回一個 Geolocation 對象，包含用戶地理位置的信息。注意，該 API 只有在 HTTPS 協議下可用，不然調用下面方法時會報錯。

• Geolocation.getCurrentPosition()：獲得用戶的當前位置
• Geolocation.watchPosition()：監聽用戶位置變化
• Geolocation.clearWatch()：取消watchPosition()方法指定的監聽函數

window.history

window.history屬性指向 History 對象，它表示當前窗口的瀏覽歷史。 History 對象保存了當前窗口訪問過的全部頁面網址。因爲安全緣由，瀏覽器不容許腳本讀取這些地址，可是容許在地址之間導航。

• history.length：當前窗口訪問過的網址數量（包括當前網頁）

• history.state：History 堆棧最上層的狀態值 `

  history.length // 1 `

• history.back()：返回到上一個網址，等同於點擊瀏覽器的後退鍵。對於第一個訪問的網址，該方法無效果。

• history.forward()：前進到下一個網址，等同於點擊瀏覽器的前進鍵。對於最後一個訪問的網址，該方法無效果。

• history.go()：接受一個整數做爲參數，以當前網址爲基準，跳轉到參數指定的網址，好比go(1)至關於forward()，go(-1)至關於back()。若是參數超過實際存在的網址範圍，該方法無效果；若是不指定參數，默認參數爲0，至關於刷新當前頁面。

• history.pushState()方法用於在歷史中添加一條記錄。該方法接受三個參數，依次爲： state：一個與添加的記錄相關聯的狀態對象，主要用於popstate事件。該事件觸發時，該對象會傳入回調函數。也就是說，瀏覽器會將這個對象序列化之後保留在本地，從新載入這個頁面的時候，能夠拿到這個對象。若是不須要這個對象，此處能夠填null。 title：新頁面的標題。可是，如今全部瀏覽器都忽視這個參數，因此這裏能夠填空字符串。 url：新的網址，必須與當前頁面處在同一個域。瀏覽器的地址欄將顯示這個網址。

`

history.pushState(null, '', 'http://www.baidu.com');// 頁面會跳往百度頁面
複製代碼

` pushState()方法不會觸發頁面刷新，只是致使 History 對象發生變化，地址欄會有變化

• history.replaceState()方法用來修改 History 對象的當前記錄。
• popstate 事件,每當同一個文檔的瀏覽歷史（即history對象）出現變化時，就會觸發popstate事件。 注意，僅僅調用pushState()方法或replaceState()方法 ，並不會觸發該事件，只有用戶點擊瀏覽器倒退按鈕和前進按鈕，或者使用 JavaScript 調用History.back()、History.forward()、History.go()方法時纔會觸發。另外，該事件只針對同一個文檔，若是瀏覽歷史的切換，致使加載不一樣的文檔，該事件也不會觸發。

`

window.onpopstate = function (event) {
  console.log('location: ' + document.location);
  console.log('state: ' + JSON.stringify(event.state));
};
複製代碼

`

結語

本次分享主要分享了Location,Navigator,History這三個對象我的以爲最爲經常使用的一些屬性，如需查看完整的。能夠前往w3c官網，本篇也參考了網道 和 ,w3c官網。