HTML5 - Locatie-object

Het object plaats is een van de vele waartoe we toegang hebben dankzij ZON, Zo verkrijgen we relevante informatie over het adres van het document en kunnen we ook naar andere documenten navigeren.
Het locatie-object
Zoals we aan het begin al zeiden, is het object plaats stelt ons in staat om toegang te krijgen tot de locatie-eigenschappen van ons document via de ZON, zodat we gedetailleerde informatie kunnen krijgen over de adressen en hoe we naar andere documenten kunnen navigeren.
Om dit alles te verkrijgen, hebben we de volgende eigenschappen en methoden die we kunnen gebruiken bij het aanroepen van dit object, laten we de lijst bekijken en wat elk doet:

· protocol: Haalt of stelt de protocolcomponent van de document-URL in.

· gastheer: Haalt of stelt de hostcomponent van de document-URL in.

· href : Haalt of stelt de locatie van het huidige document in.

· hostnaam: Haalt of stelt de hostnaam van de document-URL in.

· haven: Haalt of stelt de poortcomponent van de document-URL in.

· padnaam: Haalt of stelt het pad of padonderdeel van de document-URL in.

· zoeken: Haalt of stelt de querycomponent van de document-URL in.

· hasj : Haalt of stelt een hash-component in voor de URL van het document.

· toewijzen (): Navigeer naar de opgegeven URL.

· vervangen (): verwijder het huidige document en navigeer naar het document dat is opgegeven in de URL.

· herladen (): Laad of vernieuw het huidige document.

· resolveURL (): Zet de opgegeven relatieve URL om in een absoluut pad.

Heel goed, nu we weten wat we hebben, gaan we een klein voorbeeld zien van hoe we al deze informatie in een document kunnen krijgen met Javascript binnen ons HTML-document.

 Voorbeeld 

Laten we eens kijken hoe dit wordt geïnterpreteerd in de browser; Om de zoek- en hash-functionaliteit te demonstreren die we gebruiken ?query = appels # appels zodat we kunnen zien hoe de browser het opneemt, onder het resultaat in de volgende afbeelding:

Gebruik het locatie-object om naar een andere pagina te navigeren
Zoals we eerder hadden vermeld, kunnen we het locatieobject ook gebruiken om naar een andere site te navigeren, dat wil zeggen, om naar een ander document te gaan. Er zijn verschillende manieren om dit te doen, maar we gaan deze keer een van de eenvoudigste zien in een demonstratieve manier, laten we eerst de code bekijken die we moeten genereren en dan zullen we uitleggen hoe het werkt:

 Voorbeeld
Er zijn veel verschillende soorten fruit - er zijn alleen al meer dan 500 soorten bananen. Tegen de tijd dat we de talloze soorten appels, sinaasappels en ander bekend fruit toevoegen, staan ​​we voor duizenden keuzes.
druk op mij
Een van de meest interessante aspecten van fruit is de variëteit die in elk land beschikbaar is. Ik woon in de buurt van Londen, in een gebied dat bekend staat om zijn appels.
 

In deze code doen we gewoon het volgende, eerst stellen we vast dat in het element met de id pressme we een nieuwe functie gaan opnemen wanneer je erop klikt, dit dankzij de onclick-gebeurtenis, dan binnen de functie die wordt geactiveerd wanneer je klik we gebruiken het object document.locatie.hash en we matchen de waarde van de hash waarnaar we gaan navigeren, in dit geval is banaan een afbeelding die we hebben opgenomen als de id van een afbeelding img-element.
Laten we eens kijken hoe dit eruit ziet in onze browser:

VERGROTEN

Zoals we kunnen zien, is het een zeer nuttig gedrag en we bereiken het op een heel eenvoudige manier met behulp van het locatieobject.
Een andere manier zou kunnen zijn om de vervangmethode te gebruiken die we eerder hadden vermeld, maar de bijzonderheid van vervangen is dat het het huidige document vervangt door het document dat het als een parameter ontvangt, waardoor het document dat het aanroept uit de geschiedenis wordt verwijderd, dus de terug-knop de browser zou nergens heen leiden.Vond je deze tutorial leuk en hielp je hem?Je kunt de auteur belonen door op deze knop te drukken om hem een ​​positief punt te geven