JavaScript獲取當(dāng)前頁(yè)面路徑的三種方法
引言
在Web開(kāi)發(fā)中,我們經(jīng)常需要獲取當(dāng)前頁(yè)面的URL路徑,以便進(jìn)行導(dǎo)航、數(shù)據(jù)加載或其他與頁(yè)面相關(guān)的操作。JavaScript提供了幾種方法來(lái)幫助我們實(shí)現(xiàn)這一功能。在本文中,我們將探討幾種常用的方法。
方法一:使用 window.location 對(duì)象
window.location
對(duì)象包含了關(guān)于當(dāng)前URL的詳細(xì)信息。你可以通過(guò)訪(fǎng)問(wèn)其屬性來(lái)獲取URL的不同部分。
// 獲取完整的URL var fullUrl = window.location.href; console.log(fullUrl); // 輸出完整的URL,例如:https://example.com/page/index.html?param=value#section // 獲取路徑部分(不包括域名和查詢(xún)字符串) var pathname = window.location.pathname; console.log(pathname); // 輸出路徑部分,例如:/page/index.html // 獲取查詢(xún)字符串部分(包括問(wèn)號(hào)) var search = window.location.search; console.log(search); // 輸出查詢(xún)字符串部分,例如:?param=value // 獲取哈希部分(包括井號(hào)) var hash = window.location.hash; console.log(hash); // 輸出哈希部分,例如:#section
方法二:使用 document.URL
document.URL
屬性也是一個(gè)簡(jiǎn)單的選擇,它直接返回完整的URL。
var fullUrl = document.URL; console.log(fullUrl); // 輸出完整的URL,與window.location.href相同
方法三:使用 new URL() 構(gòu)造函數(shù)
在現(xiàn)代瀏覽器中,URL
構(gòu)造函數(shù)提供了更強(qiáng)大的URL解析和操作能力。通過(guò)它,你可以更細(xì)致地獲取URL的各個(gè)部分,并對(duì)其進(jìn)行修改。
var urlObject = new URL(window.location.href); // 獲取協(xié)議(例如:"https:") var protocol = urlObject.protocol; console.log(protocol); // 輸出協(xié)議,例如:https: // 獲取主機(jī)名(例如:"www.example.com") var hostname = urlObject.hostname; console.log(hostname); // 輸出主機(jī)名 // 獲取端口號(hào)(如果有的話(huà)) var port = urlObject.port; console.log(port); // 輸出端口號(hào),默認(rèn)為空字符串(如果使用的是默認(rèn)端口) // 獲取路徑名(與window.location.pathname相同) var pathname = urlObject.pathname; console.log(pathname); // 輸出路徑名 // 獲取搜索參數(shù)(作為URLSearchParams對(duì)象) var searchParams = urlObject.searchParams; console.log(searchParams.get('param')); // 輸出查詢(xún)字符串中名為'param'的參數(shù)值 // 獲取哈希(與window.location.hash相同,但不包括井號(hào)) var hashWithoutPound = urlObject.hash.slice(1); // 移除井號(hào) console.log(hashWithoutPound); // 輸出哈希部分,例如:section
拓展知識(shí):Javascript 獲取url路徑中的參數(shù)
需求
假設(shè)騎在路徑:https://localhost/zhaopin?name=aa&age=18&state=2
,現(xiàn)在要獲取url中各參數(shù)的值,比如:當(dāng)請(qǐng)求name時(shí)獲取到aa,當(dāng)獲取到age時(shí)獲取到18。
理論基礎(chǔ)
let url = document.location.toString();//獲取url地址 let urlParmStr = url.slice(url.indexOf('?')+1);//獲取問(wèn)號(hào)后所有的字符串 let arr = urlParmStr.split('&');//通過(guò)&符號(hào)將字符串分割轉(zhuǎn)成數(shù)組 let courseId = arr[0].split("=")[1];//獲取數(shù)組中第一個(gè)參數(shù) let unit_title=arr[1].split("=")[1];//第二個(gè)參數(shù) unit_title=decodeURI(unit_title);//轉(zhuǎn)碼將解碼方式unscape換為decodeURI,將中文參數(shù)獲取 console.log(unit_title);
解決方案
方法一:
function getUrlVariable(variable) { var query = window.location.search.substring(1); var vars = query.split("&"); for (var i = 0; i < vars.length; i++) { var pair = vars[i].split("="); if (pair[0] == variable) { return pair[1]; } } //返回boolean類(lèi)型的數(shù)據(jù) return (false); }
方法二:
function getUrlParameter(name) { name = name.replace(/[]/, "\[").replace(/[]/, "\[").replace(/[]/, "\\\]"); var regexS = "[\\?&]" + name + "=([^&#]*)"; var regex = new RegExp(regexS); var results = regex.exec(window.parent.location.href); if (results == null) return ""; else { return results[1]; } }
測(cè)試
測(cè)試路徑:https://localhost/zhaopin?name=aa&age=18&state=2
<script> let name =getUrlVariable("name"); console.log(name); </script>
總結(jié)
以上就是在JavaScript中獲取當(dāng)前頁(yè)面路徑的幾種常用方法。每種方法都有其獨(dú)特的用途和優(yōu)點(diǎn),你可以根據(jù)具體需求選擇適合你的方法。無(wú)論你選擇哪種方法,都能輕松地獲取到當(dāng)前頁(yè)面的路徑并進(jìn)行相應(yīng)的操作。
在大多數(shù)情況下,使用 window.location 或 document.URL 就足夠了,但如果你需要更復(fù)雜的URL處理或修改,那么 URL 構(gòu)造函數(shù)將是一個(gè)更好的選擇。
到此這篇關(guān)于JavaScript獲取當(dāng)前頁(yè)面路徑的三種方法的文章就介紹到這了,更多相關(guān)JavaScript獲取頁(yè)面路徑內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
十個(gè)開(kāi)發(fā)人員面臨的最常見(jiàn)的JavaScript問(wèn)題總結(jié)
今天,JavaScript?是幾乎所有現(xiàn)代?Web?應(yīng)用的核心。這就是為什么JavaScript問(wèn)題,以及找到導(dǎo)致這些問(wèn)題的錯(cuò)誤,是?Web?發(fā)者的首要任務(wù)。本文總結(jié)了十個(gè)常見(jiàn)的問(wèn)題及解決方法,需要的可以參考一下2022-11-11js實(shí)現(xiàn)省市聯(lián)動(dòng)效果的簡(jiǎn)單實(shí)例
本篇文章主要是對(duì)js實(shí)現(xiàn)省市聯(lián)動(dòng)效果的簡(jiǎn)單實(shí)例進(jìn)行了介紹,需要的朋友可以過(guò)來(lái),希望對(duì)大家有所幫助2014-02-02解決遠(yuǎn)程頁(yè)面抓取中的亂碼問(wèn)題?
解決遠(yuǎn)程頁(yè)面抓取中的亂碼問(wèn)題?...2007-03-03JavaScript如何使用插值實(shí)現(xiàn)圖像漸變
這篇文章主要介紹了JavaScript如何使用插值實(shí)現(xiàn)圖像漸變,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-06-06JavaScript如何獲取和解析頁(yè)面內(nèi)容
這篇文章主要為大家詳細(xì)介紹了如何利用JavaScript實(shí)現(xiàn)獲取和解析頁(yè)面內(nèi)容,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解一下2025-03-03微信小程序網(wǎng)絡(luò)數(shù)據(jù)請(qǐng)求服務(wù)實(shí)現(xiàn)詳解
這篇文章主要介紹了微信小程序網(wǎng)絡(luò)數(shù)據(jù)請(qǐng)求服務(wù),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2022-10-10JavaScript數(shù)組,JSON對(duì)象實(shí)現(xiàn)動(dòng)態(tài)添加、修改、刪除功能示例
這篇文章主要介紹了JavaScript數(shù)組,JSON對(duì)象實(shí)現(xiàn)動(dòng)態(tài)添加、修改、刪除功能,結(jié)合實(shí)例形式分析了JavaScript針對(duì)json數(shù)組的添加、刪除、修改操作實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-05-05