Dit artikel beschrijft de methoden voor het wijzigen van de URL zonder de webpagina opnieuw te laden met behulp van JavaScript.
Hoe de URL in JavaScript wijzigen/wijzigen zonder de pagina opnieuw te laden?
Gebruik de volgende vooraf gedefinieerde JavaScript-methode om de URL te wijzigen zonder de webpagina opnieuw te laden:
Methode 1: Wijzig de URL in JavaScript zonder de pagina opnieuw te laden met behulp van de 'pushState()'-methode
Om de URL te wijzigen zonder de webpagina opnieuw te laden, gebruikt u de ' pushState() ” methode. Het is een functie of de vooraf gedefinieerde methode van de ' geschiedenis Voorwerp ” waarmee u de browsergeschiedenis kunt wijzigen zonder te navigeren of de pagina te vernieuwen. Het voegt alleen de geschiedenisstapel toe of wijzigt deze en laadt geen nieuwe pagina. Door deze benadering te gebruiken, kunt u heen en weer schakelen tussen de pagina's door een nieuw item toe te voegen aan de geschiedenisstapel van de browser.
Syntaxis
Volg de gegeven syntaxis voor de methode 'pushState()':
raam. geschiedenis . pushState ( staat , titel , url ) ;
Hier:
- “ staat ” vertegenwoordigt de nieuwe geschiedenisinvoer.
- “ titel ” is de specifieke tekst die kan worden weergegeven in de titelbalk van de browser.
- “ url ” geeft de vervangen URL aan als een nieuw item.
Voorbeeld
Maak in een HTML-bestand vier knoppen die de ' wijzigUrl() ” functie op de knop klikken:
< knop opklik = 'modifyUrl('CSS-zelfstudie', 'CSSTutorial.html');' > 2 knop >
< knop opklik = 'modifyUrl('JavaScript-zelfstudie', 'JavaScript-zelfstudie.html');' > 3 knop >
< knop opklik = 'modifyUrl('Java-zelfstudie', 'JavaTutorial.html');' > 4 knop >
Definieer een functie “ wijzigUrl() ” in een JavaScript-bestand dat wordt geactiveerd bij het klikken op de knop. Er zijn twee parameters nodig, de ' titel ' en de ' url ”. Wanneer de methode wordt aangeroepen door op de knop te klikken, worden de 'titel' en de 'url' als argumenten doorgegeven. Controleer het type ' pushState ' van het geschiedenisobject, als dit niet ' ongedefinieerd ”. Bel dan de “ geschiedenis.pushState() ” methode om de URL te wijzigen:
functie URL wijzigen ( titel , url ) {
als ( soort van ( geschiedenis. pushState ) != 'onbepaald' ) {
was obj = {
Titel : titel ,
Url : url
} ;
geschiedenis. pushState ( obj , obj. Titel , obj. Url ) ;
}
}
Het is te zien dat bij elke klik op de knop de URL met succes wordt gewijzigd zonder de pagina opnieuw te laden:
In de bovenstaande uitvoer kunt u zien dat de pijl-terugknop linksboven ( <- ) is ingeschakeld terwijl u op de knop klikt, geeft dit aan dat u heen en weer kunt navigeren omdat de “ pushState() ”methode voegt de nieuwe URL toe aan de geschiedenisstapel.
Methode 2: Wijzig de URL in JavaScript zonder de pagina opnieuw te laden met behulp van de 'replaceState()'-methode
Gebruik de ' vervangStaat() ”methode voor het wijzigen van de URL zonder de webpagina opnieuw te laden. Het is ook een kenmerk van de “ geschiedenis Voorwerp ” maar het voegt geen nieuw item toe aan de geschiedenisstapel. Het verandert de bestaande staat van de geschiedenis van de browser en vervangt deze door een nieuwe staat. Door deze aanpak te gebruiken, kunt u niet heen en weer schakelen tussen de pagina's.
Syntaxis
De gegeven syntaxis wordt gebruikt voor de methode 'replaceState()':
Voorbeeld
Roep in de gedefinieerde functie de ' vervangStaat() ” methode om de URL bij de klik op de knop te vervangen zonder de pagina opnieuw te laden of te navigeren:
als ( soort van ( geschiedenis. vervangStaat ) != 'onbepaald' ) {
was obj = {
Titel : titel ,
Url : url
} ;
geschiedenis. vervangStaat ( obj , obj. Titel , obj. Url ) ;
}
}
De uitvoer geeft aan dat bij elke klik op de knop de URL is gewijzigd en dat er geen optie is om te navigeren om terug te gaan, aangezien de pijlknop Terug is uitgeschakeld:
We hebben alle essentiële informatie verstrekt die relevant is voor de wijziging van de URL zonder de pagina opnieuw in JavaScript te laden.
Conclusie
Om de URL te wijzigen/wijzigen zonder de webpagina te vernieuwen, gebruikt u de ' pushState() ” methode of de “ vervangStaat() ” methode. De methode 'pushState()' voegt de nieuwe URL toe als een nieuw item in een geschiedenisstapel en stelt gebruikers in staat om heen en weer te navigeren. Terwijl de methode 'replaceState()' de URL vervangt en niet toestaat om naar de achterpagina te gaan. In dit artikel worden de methoden beschreven voor het wijzigen van de URL zonder de webpagina opnieuw te laden met behulp van JavaScript.