點擊頁籤時改變網址參數的方法

2023 iThome 鐵人賽

DAY 20

自我挑戰組

前端菜雞_賀周歲成長日誌系列第 20 篇

15th鐵人賽

晚睡公主

2023-10-04 22:17:49

152 瀏覽

分享至

前言

在這篇文章，先講解「解析網址」，讓各位知道做這功能最關鍵(?)的方法後，再講步驟，我相信這樣一步步來，會更容易把一個功能寫好！

先講解 - 解析網址（Parsing URL）

瀏覽器內建的 Parsing URL ，可以幫助我們解析網址。

以一個真實網址舉例（偷偷推薦歌）。

https://www.youtube.com/watch?v=hjJhweRlE-A&list=RDEMOkJSvclvpCF5654JWM2uiQ&start_radio=1

得到目前的query string

使用 Parsing URL 的 .search 方法。

步驟

設置網址為變數(let a = new URL(…))
用瀏覽器內建取得網址(a.href)或是網頁路徑(a.pathname)或是網頁參數(search、searchParams)
解析參數，可以使用解構賦值

舉例

假如目的是拿到這串網址中，start_radio 這個欄位名稱所帶的值。

為大家示範殊途同歸(實驗精神)

用 split

let href = new URL('https://www.youtube.com/watch?v=hjJhweRlE-A&list=RDEMOkJSvclvpCF5654JWM2uiQ&start_radio=1')
let paramArr = href.search.split('?')[1].split('&')
for (let i = 0; i < paramArr.length; i++) {
		let itemKey = paramArr[i].split('=')[0]
		let itemValue = paramArr[i].split('=')[1]
    console.log(`key: ${itemKey }, value: ${itemValue }`)
}

>> key: v, value: hjJhweRlE-A
>> key: list, value: RDEMOkJSvclvpCF5654JWM2uiQ
>> key: start_radio, value: 1

用 \ 解構賦值 /

let href = new URL('https://www.youtube.com/watch?v=hjJhweRlE-A&list=RDEMOkJSvclvpCF5654JWM2uiQ&start_radio=1')
console.log(href.searchParams.toString())
let queryString = href.searchParams
for (let item of queryString.entries()) {
  console.log(`key: ${item[0]}, value: ${item[1]}`)
}

>> v=hjJhweRlE-A&list=RDEMOkJSvclvpCF5654JWM2uiQ&start_radio=1
>> key: v, value: hjJhweRlE-A
>> key: list, value: RDEMOkJSvclvpCF5654JWM2uiQ
>> key: start_radio, value: 1

看看把網址放進 new URL 會是什麼呢

其實 Parsing URL 還有蠻多方法，包括 .href、.protocol、.hostname、.search、.searchParams，在這不一一講，可以參考其他厲害文章 :3

點擊頁籤換網址的實現步驟

方法

以參數跟頁籤是互相連動的狀況為例。

*當載入網頁

得到目前的網址(參數)
- 得到網址使用 window.location.href
- 得到參數使用上面提到的 Parsing URL 方法
解析參數
- 利用上面提到的 split + for 或是 entries + for...of (較推薦後者)
得到需要的值後，於程式做相對應處理(可能是改樣式，或是要顯示不同文字)

*當頁籤被點擊

頁籤的點擊事件觸發
更換網址參數

(換網址參數就會重整，就這樣子輪迴)

加碼-做得更完整

網址改變但不讓頁面重整，按上一頁可以回上個頁籤

意即要佈上歷史痕跡，可以用 history.pushState 這個方法。

history.pushState({ tabname : "activity" }, null, "index.html");

state，可以接受一個物件，放要設置的參數。
title，實際上沒有用途，且會被瀏覽器忽略，放null就好。
URL，可傳可不傳，用來設定本筆歷史紀錄網址。

補充 - query string是什麼

說明

query string 翻成中文即為「請求的參數」，是URL的一部分。
典型的 query string 會以等號分隔「欄位名稱」與「值」，所以會是 欄位名稱=值的形式；並且用「&」分隔每個查詢條件對。合起來就會像 欄位名稱1=值1&欄位名稱2=值2&欄位名稱3=值3 。
在這邊的都是字串，不會分number之類的。
如果是字母、數字、和這些字元（'~'、'-.' 和 '_'）之外，其他字元都會被再編碼過，例如空格會被編碼為 '+' 或 ' %20'