JavaScript:Získejte aktuální URL a komponenty (protokol, doména, port, cesta, dotaz, hash)

Úvod

V tomto tutoriálu se podíváme na to, jak získat aktuální adresu URL načtené stránky HTML pomocí JavaScriptu.

Nejprve se podívejme na adresu URL:

https://www.stackabuse.com:8080/category/article-title.html?searchterm=Example+title#2

Je to vytvořená URL, která obsahuje několik komponent – ​​protokol , doména , port , cesta , dotaz a hash .

Komponenty URL

Adresa URL, kterou jsme definovali, se skládá z různých segmentů rozdělených určitými speciálními znaky, například / , ? a # . Každý z těchto segmentů je komponentou adresy URL :

  • Protokol - Protokol adresy URL odkazuje na segment adresy URL, který definuje který protokol pro přenos dat se používá. V našem případě používáme https:// , což znamená protokol HTTPS.

  • Doména – Doména, známá také jako název hostitele adresy URL, odkazuje na pokračující sekci adresy URL – www.stackabuse.com .

  • Port - Sekce portu adresy URL je uvedena za doménou a předchází jí : . Port většinou není veřejný, takže jej v nasazených aplikacích skutečně uvidíte jen zřídka, ale velmi často ve fázi vývoje.

  • Cesta - Část cesty adresy URL následuje za názvem domény a portem. Určuje jeden zdroj na webu, stránce HTML, obrázku nebo jiném typu souboru nebo adresáře. V našem příkladu cesta odkazuje na /category/article-title.html segment, což znamená, že ukazuje na article-title.html soubor na serveru.

  • Dotaz - Dotaz je řetězec, který se obvykle používá k povolení interního vyhledávání na webu. Sekce dotazu odkazuje na ?articleTitle=Example+title části vzorové adresy URL a je výsledkem toho, že uživatel zadal hledaný výraz Example title na article-title.html stránce webu.

  • Hash – Sekce hash se obvykle používá k reprezentaci kotvy na stránce, což je obvykle nadpis, ale může to být jakýkoli jiný <div> nebo tag, vzhledem k tomu, že se zaměřujeme na jeho id atribut. V našem případě cílíme na #2 , posouváním pohledu uživatele na značku s id=2 .

Obecně řečeno, adresy URL mají poměrně standardizovanou strukturu, kde některé prvky jsou volitelné, zatímco jiné nikoli:

<protocol>//<domain>:<port>/<path>/<query><hash>

Nyní se můžeme blíže podívat na to, jak přistupovat k aktuální adrese URL a ke každé z jejích součástí pomocí JavaScriptu.

Jak získat aktuální adresu URL v JavaScriptu

V JavaScriptu Location obsahuje informace o URL aktuálně načtené webové stránky. Patří do window , ale můžeme k němu přistupovat přímo, protože window je hierarchicky umístěn v horní části rozsahu

K získání aktuální adresy URL použijeme Location objekt a načtěte jeho href vlastnost:

var url = window.location.href
console.log(url)

Výsledkem je:

https://www.stackabuse.com:8080/python/article-title.html?searchterm=Example+title#2

href vlastnost obsahuje úplnou adresu URL aktuálně načteného zdroje. Pokud chcete načíst některé určité součásti, nikoli celou adresu URL, Location objekt má také různé vlastnosti.

Získat původ adresy URL

window.location.origin vlastnost vrací základní adresu URL (protokol + název hostitele + číslo portu) aktuální adresy URL:

console.log(window.location.origin)
https://www.stackabuse.com:8080

Získat protokol URL

window.location.protocol vlastnost vrací protokol používá aktuální URL:

console.log(window.location.protocol)
https://

Získat hostitele adresy URL a název hostitele

window.location.host vlastnost vrací název hostitele a číslo portu aktuální adresy URL:

console.log(window.location.host)
www.stackabuse.com:8080

Na druhé straně window.location.hostname vlastnost vrací název hostitele aktuální adresy URL:

console.log(window.location.hostname)
www.stackabuse.com

Získat port adresy URL

window.location.port vlastnost vrací číslo portu aktuální adresy URL:

console.log(window.location.port)
8080

ZÍSKAT cestu URL

window.location.pathname vlastnost vrátí část cesty aktuální adresy URL:

console.log(window.location.pathname)
/category/article-title.html

Získat URL dotaz a hash

window.location.search vlastnost vrací **sekci dotazu ** aktuální adresy URL:

Zdarma e-kniha:Git Essentials

Prohlédněte si našeho praktického průvodce učením Git s osvědčenými postupy, průmyslově uznávanými standardy a přiloženým cheat sheetem. Přestaňte používat příkazy Google Git a skutečně se naučte to!

console.log(window.location.search)
?searchterm=Example+title

window.location.hash vlastnost vrátí sekci hash aktuální adresy URL:

console.log(window.location.hash)
#2

Závěr

Jak jsme viděli, JavaScript a poskytuje výkonný, ale jednoduchý způsob přístupu k aktuální adrese URL. Location objekt, ke kterému přistupuje Window rozhraní nám umožňuje získat nejen řetězcovou reprezentaci aktuální adresy URL, ale každou její jednotlivou sekci.

Location objekt také může měnit a manipulovat s aktuální adresou URL, stejně jako přesměrovat stránku na novou adresu URL.