logo
 JavaScript >> Javascript tutorial >  >> Tags >> URL

JavaScript:Få aktuel URL og komponenter (protokol, domæne, port, sti, forespørgsel, hash)

Introduktion

I denne vejledning tager vi et kig på hvordan man får den aktuelle URL af en indlæst HTML-side ved hjælp af JavaScript.

Lad os først tage et kig på en URL:

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

Det er en sammensat URL, som indeholder flere komponenter - protokollen , domæne , port , sti , forespørgsel og hash .

URL-komponenter

Den URL, vi har defineret, består af forskellige segmenter, divideret med visse specialtegn, såsom / , ? og # . Hvert af disse segmenter er en URL-komponent :

  • Protokol - Protokollen for en URL refererer til URL-segmentet, som definerer hvilken protokol til dataoverførsel anvendes. I vores tilfælde bruger vi https:// , hvilket betyder HTTPS-protokollen.

  • Domæne - Domænet, også kendt som værtsnavnet på en URL, henviser til den videre sektion af en URL - www.stackabuse.com .

  • Port - Portsektionen af ​​en URL er angivet efter domænet, efter : . Det meste af tiden er porten ikke offentlig, så du vil sjældent se den i implementerede applikationer, men meget almindeligt i udviklingsfasen.

  • Sti - Stiafsnittet for en URL følger domænenavnet og porten. Det specificerer en enkelt ressource på et websted, en HTML-side, et billede eller en anden type fil eller mappe. I vores eksempel er stien henviser til /category/article-title.html segment, hvilket betyder, at det peger på article-title.html fil på serveren.

  • Forespørgsel - Forespørgslen er en streng, der normalt bruges til at aktivere interne søgninger på en hjemmeside. Forespørgselsafsnittet henviser til ?articleTitle=Example+title sektionen af ​​eksempel-URL'en og er et resultat af, at brugeren indtaster søgeordet Example title på article-title.html side på webstedet.

  • Hash - Hash-sektionen bruges normalt til at repræsentere et anker på siden, som normalt er en overskrift, men kan være en hvilken som helst anden <div> eller tag, givet at vi sigter mod dets id attribut. I vores tilfælde sigter vi mod #2 , ved at rulle brugerens visning til tagget med en id=2 .

Generelt har URL'er en ret standardiseret struktur, hvor visse elementer er valgfrie, mens andre ikke er:

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

Nu kan vi se nærmere på, hvordan man får adgang til den aktuelle URL, såvel som hver af dens komponenter ved hjælp af JavaScript.

Sådan får du den aktuelle URL i JavaScript

I JavaScript er Location objektet indeholder information om URL'en på den aktuelt indlæste webside. Den tilhører window , men vi kan få direkte adgang til det, fordi window er hierarkisk placeret øverst i omfanget

For at få den aktuelle URL bruger vi Location objekt og hent dets href ejendom:

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

Dette resulterer i:

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

href egenskaben indeholder den fulde URL til den aktuelt indlæste ressource. Hvis du gerne vil hente nogle bestemte komponenter i stedet for hele URL'en, skal Location objekt har også forskellige egenskaber.

Få URL-oprindelse

window.location.origin egenskaben returnerer grundadressen (protokol + værtsnavn + portnummer) af den aktuelle URL:

console.log(window.location.origin)

https://www.stackabuse.com:8080

Hent URL-protokol

window.location.protocol egenskab returnerer protokollen brugt af den aktuelle URL:

console.log(window.location.protocol)

https://

Hent URL-vært og værtsnavn

window.location.host egenskab returnerer værtsnavnet og portnummeret af den aktuelle URL:

console.log(window.location.host)

www.stackabuse.com:8080

På den anden side er window.location.hostname egenskaben returnerer værtsnavnet af den aktuelle URL:

console.log(window.location.hostname)

www.stackabuse.com

Hent URL-port

window.location.port egenskab returnerer portnummeret af den aktuelle URL:

console.log(window.location.port)

8080

GET URL-sti

window.location.pathname egenskab returnerer stiafsnittet af den aktuelle URL:

console.log(window.location.pathname)

/category/article-title.html

Hent URL-forespørgsel og Hash

window.location.search egenskab returnerer **forespørgselssektionen ** af den aktuelle URL:

Gratis e-bog:Git Essentials

Tjek vores praktiske, praktiske guide til at lære Git, med bedste praksis, industriaccepterede standarder og inkluderet snydeark. Stop med at google Git-kommandoer og lær faktisk det!

console.log(window.location.search)

?searchterm=Example+title

window.location.hash egenskaben returnerer hash-sektionen af den aktuelle URL:

console.log(window.location.hash)

#2

Konklusion

Som vi har set, giver JavaScript en kraftfuld, men alligevel enkel måde at få adgang til den aktuelle URL. Location objekt, tilgået af Window grænsefladen gør det muligt for os at få ikke kun strengrepræsentationen af ​​den aktuelle URL, men hver enkelt sektion af den.

Location objekt kan også ændre og manipulere den aktuelle URL, samt omdirigere siden til den nye URL.