10分鐘回顧Location對象的幾個知識點

Location對象包含有關當前URL的信息.它是Window對象的一部分,可經過window.location屬性來訪問.

個人頁面路徑是 http://127.0.0.1:5501/html/index.html?id=123#test,在控制檯鍵入window.location,返回一個Location對象.

這其中有些是屬性,有些是方法,咱們來簡單瞭解一下.

對象屬性

咱們按照上圖中展開的Location對象,來講一說其中的一些屬性

屬性	描述
hash	錨點部分,以#開頭
host	主機名 + 端口號
hostname	主機名 如127.0.0.1 localhost 等
href	包含完整URL
origin	協議 + 主機名 + 端口號(咱們常說的跨域,跨的就是它)
pathname	路徑部分,以 / 開頭
port	端口,常見的80 443等
protocol	URL對應的協議,注意最後是有一個:的,如http: https: 等
search	參數部分,以? 開頭

下面這個是一個在MDN上的例子,比較清晰直觀的展現了各個部分的內容:

其中上面的屬性,除了 origin 是個只讀屬性不可修改外,其他的屬性都是讀寫兼備的. 下面是屬性如何獲取和設置的用法

console.log(window.location.hash)  // 讀取當前頁面的hash 結果爲 #test
window.location.hash = 'test2' // 設置當前頁面的hash 此時能夠觀察到瀏覽器的url會變化
console.log(window.location.hash) // 再次讀取hash,結果變成了 #test2
window.location.href = 'https://www.baidu.com'  // 頁面直接跳轉到百度
複製代碼

在這裏順便提一下,如今大部分的瀏覽器都支持 hashchange 事件.就是當瀏覽器# 後面的內容變化時,觸發此事件.

window.addEventListener('hashchange', () => {
	console.log('Hash has changed')
})
複製代碼

執行上面的代碼後,當咱們改變url的hash部分時,控制檯就會打印出提示.固然,對於那些不兼容hashchange事件的瀏覽器,也是有辦法能夠模擬的,好比設置一個定時器,每隔必定時間去查詢當前的hash,和以前的hash去作對比從而判斷url中的hash是否改變了.

補充案例

曾經項目中有一個需求是這樣的,點擊按鈕複製一個帶有我的邀請碼的註冊連接.如這種樣子的:https://www.xx.com/register?code=8888.那麼這個連接就須要咱們本身去拼接了.我原先僞代碼以下

let inviteCode = 8888
let url = location.origin + '/register?code' + inviteCode
copy(url)
複製代碼

可是後來測試同窗在兼容性測試的時候告訴我這裏有問題,在IE11如下的瀏覽器中複製出來的路徑是有問題的.因而,我去排查緣由,發現location.origin 這個屬性在IE10及其如下是不存在的,會返回undefined,既然發現了問題所在,那咱們就好解決了.解決代碼以下:

if(!location.origin){
    location.origin = location.protocol + '//' + location.hostname + (location.port ? ':'+location.port : '') 
}
let inviteCode = 8888
let url = location.origin + '/register?code' + inviteCode
copy(url)
複製代碼

提交代碼,因而測試同窗高興的告訴我說問題解決了.

對象方法

從文章最開頭的圖中能夠看到 Location 對象有3個方法 (toString方法就不說了,就是返回一個包含完整url的字符串)

方法	描述
assign	加載新頁面
reload	重加載當前頁面
replace	用一個新頁面代替當前頁面

這裏來講明一下這幾個方法的用法和區別.首先咱們說的是reload方法.此方法的參數是一個可選的布爾類型,不填默認爲false,表示從緩存中讀取當前頁面刷新,至關於普通的F5刷新,true表示強制瀏覽器從服務器去從新獲取頁面資源,至關於強制刷新(Shift+F5 或者 Cmd+Shift+R),具體用法以下:

window.location.reload()  // 執行後會從新加載當前頁面
複製代碼

而後是 assign 和 replace 方法,這兩個方法都須要傳入一個參數,表示新頁面的地址.它們的區別在於,使用了 assign 後,會在瀏覽器的歷史記錄中留下以前老頁面的地址,當咱們在新頁面點擊回退鍵的時候還能夠回到以前的頁面.而 replace 則是使用新頁面的地址替換老頁面的地址,此時再點擊回退按鈕就回不到咱們以前的頁面去了.你們能夠新開一個空白頁面,而後分別將下面的代碼放到控制檯去執行一下,再以後點擊瀏覽器左上角的回退按鈕,觀察效果.

// 新開兩個空白頁,各執行其中一句代碼
window.location.assign('https://www.baidu.com')
window.location.replace('https://www.baidu.com')
複製代碼

在MDN中提到,Location 實際上是一個接口,表示連接到的對象的URL.Document 和 Window 接口都有這樣一個連接的Location.因此咱們能夠經過document.location 或 window.location 來訪問 Location 對象.甚至於location 都是一個全局變量.咱們直接在控制檯鍵入 location 也會返回一個 Location 對象

meta屬性實現刷新和跳轉

其實當咱們想要實現頁面的跳轉或者每隔一段時間刷新當前頁面,不必定非得使用定時器+location方法.咱們還可使用meta屬性來達到相同的效果.假如我這是一個監控頁面,想要每隔20秒刷新一次頁面.使用定時器的方法代碼以下:

setTimeout(() => {
	window.location.reload()
},20000)
複製代碼

而使用meta標籤則只須要

<meta http-equiv="refresh" content="20"/>
複製代碼

又假如這是一個簡單的介紹頁,在10s後差很少就要自動跳到其餘頁面.咱們也可使用上面的meta屬性.只須要在content裏面時間的後面加上跳轉的地址就能夠了,等時間到了它就會自動跳轉.

<meta http-equiv="refresh" content="10;https://www.baidu.com"/>
複製代碼

固然使用meta有一個很差的地方就是它的刷新和跳轉是不可中途取消的.所以它的使用場景要視具體的業務而定.好比一個須要權限的頁面被非法訪問,那麼就能夠控制必定時間後自動跳到其餘頁面去.

獲取url中的查詢字符串

不少時候,咱們有這樣的需求,就是獲取url查詢字符串中某個key對應的value.好比在一個如 http://127.0.0.1:5501/html/index.html?id=123&name=zhangsan 的頁面中獲取id對應的值,也就是123.那麼咱們也有很多方法能夠來作這個事情.

傳統的方法:

function getUrlQuery(){
  let url = window.location.search
  let obj = Object.create(null)
  if(url.includes('?')){
    let str = url.substr(1)
    let strs = str.split('&')
    for(let i = 0;i < strs.length;i++){
      obj[strs[i].split('=')[0]] = strs[i].split('=')[1]
    }
  }
  return obj
}
複製代碼

使用 URLSearchParams 接口:

const urlParams = new URLSearchParams(window.location.search)
console.log(urlParams.get('id'))  // 123
複製代碼

URLSearchParams 接口定義了一些實用的方法來處理URL中的查詢字符串.這裏是它的具體介紹,有興趣的同窗能夠本身去看看,咱們就先不展開了.

總結

其實對於 Location 對象,它的知識相對而言並非不少.在紅寶書中也只有短短的3頁內容.做爲BOM中的一部分,它經常也會和 Navigator, History對象一塊兒提到,這部份內容咱們後面有時間再說好了.