JavaScript:haal de huidige URL en componenten op (protocol, domein, poort, pad, query, hash)

Inleiding

In deze zelfstudie bekijken we hoe u de huidige URL kunt krijgen van een geladen HTML-pagina, met behulp van JavaScript.

Laten we eerst eens naar een URL kijken:

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

Het is een verzonnen URL, die verschillende componenten bevat - het protocol , domein , poort , pad , zoekopdracht en hash .

URL-componenten

De URL die we hebben gedefinieerd, bestaat uit verschillende segmenten, gescheiden door bepaalde speciale tekens zoals / , ? en # . Elk van deze segmenten is een URL-component :

  • Protocol - Het protocol van een URL verwijst naar het URL-segment dat bepaalt welk protocol voor gegevensoverdracht wordt gebruikt. In ons geval gebruiken we https:// , wat het HTTPS-protocol aanduidt.

  • Domein - Het domein, ook wel de hostnaam van een URL genoemd, verwijst naar het vervolggedeelte van een URL - www.stackabuse.com .

  • Poort - Het poortgedeelte van een URL wordt gespecificeerd na het domein, voorafgegaan door : . Meestal is de poort niet openbaar, dus je zult hem zelden zien in geïmplementeerde applicaties, maar heel vaak in de ontwikkelingsfase.

  • Pad - Het padgedeelte van een URL volgt de domeinnaam en poort. Het specificeert een enkele bron op een website, HTML-pagina, afbeelding of een ander type bestand of map. In ons voorbeeld is het pad verwijst naar de /category/article-title.html segment, wat betekent dat het verwijst naar de article-title.html bestand op de server.

  • Zoekopdracht - De zoekopdracht is een tekenreeks die meestal wordt gebruikt om interne zoekopdrachten op een website mogelijk te maken. Het zoekgedeelte verwijst naar de ?articleTitle=Example+title gedeelte van de voorbeeld-URL en is het resultaat van het invoeren van de zoekterm Example title . door de gebruiker op de article-title.html pagina van de website.

  • Hash - De hash-sectie wordt meestal gebruikt om een ​​anker op de pagina weer te geven, wat gewoonlijk een kop is, maar kan elke andere <div> zijn of tag, aangezien we ons richten op de id attribuut. In ons geval streven we naar #2 , door de gebruikersweergave naar de tag te scrollen met een id=2 .

Over het algemeen hebben URL's een redelijk gestandaardiseerde structuur, waarbij bepaalde elementen optioneel zijn, terwijl andere dat niet zijn:

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

Nu kunnen we nader bekijken hoe we toegang kunnen krijgen tot de huidige URL, evenals elk van de componenten ervan met behulp van JavaScript.

Hoe u de huidige URL in JavaScript kunt krijgen

In JavaScript is de Location object bevat de informatie over de URL van de momenteel geladen webpagina. Het is van window , we hebben er echter rechtstreeks toegang toe omdat window bevindt zich hiërarchisch bovenaan het bereik

Om de huidige URL te krijgen, gebruiken we de Location object en haal zijn href . op eigendom:

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

Dit resulteert in:

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

De href eigenschap bevat de volledige URL naar de momenteel geladen bron. Als u bepaalde componenten wilt ophalen in plaats van de volledige URL, moet de Location object heeft ook verschillende eigenschappen.

Verkrijg URL-oorsprong

De window.location.origin eigenschap retourneert de basis-URL (protocol + hostnaam + poortnummer) van de huidige URL:

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

URL-protocol ophalen

De window.location.protocol eigenschap retourneert het protocol gebruikt door de huidige URL:

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

Verkrijg URL-host en hostnaam

De window.location.host eigenschap retourneert de hostnaam en het poortnummer van de huidige URL:

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

Aan de andere kant, de window.location.hostname eigenschap retourneert de hostnaam van de huidige URL:

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

URL-poort ophalen

De window.location.port eigenschap retourneert het poortnummer van de huidige URL:

console.log(window.location.port)
8080

Haal URL-pad op

De window.location.pathname eigenschap retourneert het padgedeelte van de huidige URL:

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

URL-query en hash ophalen

De window.location.search eigenschap retourneert **het zoekgedeelte ** van de huidige URL:

Gratis eBook:Git Essentials

Bekijk onze praktische, praktische gids voor het leren van Git, met best-practices, door de industrie geaccepteerde standaarden en het meegeleverde spiekbriefje. Stop met Googlen op Git-commando's en leer actually het!

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

De window.location.hash eigenschap retourneert de hash-sectie van de huidige URL:

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

Conclusie

Zoals we hebben gezien, biedt JavaScript a een krachtige, maar eenvoudige manier om toegang te krijgen tot de huidige URL. De Location object, toegankelijk via de Window interface stelt ons in staat om niet alleen de tekenreeksrepresentatie van de huidige URL te krijgen, maar ook van elk afzonderlijk gedeelte ervan.

De Location object kan ook de huidige URL wijzigen en manipuleren, en de pagina omleiden naar de nieuwe URL.