通過js獲得當前頁面路由參數的方法

通過js獲得當前頁面路由參數,是一個常用的方法,即使是靜態的html頁面,也可以藉此獲得傳來的參數,達到動態頁面一般的效果。

window.location

我們需要用到的就是window.location的幾個屬性,下面從這個簡單的測試代碼中可以看到詳細的用法:

建立一個htm文件,先設置一個全局樣式,為的是清晰地顯示文字

 

下面是js代碼部分

 

保存代碼到一個頁面比如1.htm,我們需要在本地啟動一個模擬的web服務器,比如使用vscode的GoLive插件,在本例中,它啟用的默認web地址是 http://127.0.0.1:5500 ,在其對應的根目錄下建立js目錄,1.htm放在其中,然後我訪問類似這樣的地址即可看到頁面:

http://127.0.0.1:5500/js/1.htm

這是一個普通的靜態頁面地址,我們可以帶上一些參數,形成這樣的地址:

http://127.0.0.1:5500/js/1.htm?id=7&do=ok#first

這是個比較完整的url,他帶有了協議,端口,路徑,參數,還有錨點,已經可以滿足所有動態頁面的應用,我們得到這個結果:

通過js獲得當前頁面路由參數的方法

我們可以看到,所有的參數都被解析出來了!

注:當然你也可以直接打開瀏覽器訪問頁面1.htm,而無需啟動模擬的web服務器。顯示的協議是file://開頭的。但是路徑編碼後會比較長不方便看,僅此而已。

總結一下:

window.location.href

獲取完整的 URL:

http://127.0.0.1:5500/js/1.htm?id=7&do=ok#first

window.location.protocol

獲取 URL 的協議類型:

http:

window.location.host

獲取網址和端口號:

127.0.0.1:5500

window.location.pathname

獲取/開頭的帶路徑的文件名:

/js/1.htm

window.location.search

獲取文件名問號後面的部分(含問號)

?id=7&do=ok

window.location.hash

獲取 URL 最後#號後的部分(含#號)

#first

window.location.port

獲取 URL 的端口號。

5500

以上就是js所能獲得的url參數了。方法簡單而用法無窮:

通過js獲得當前頁面路由參數的方法

我們可以通過獲取這些屬性,來判斷頁面狀態,做出相應的動作或者交互響應。

我們也可以通過寫入新的數據而使這些屬性發生改變,此時頁面就會跳轉到新的url頁面去了!


分享到:


相關文章: