Den här artikeln kommer att beskriva metoderna för att ändra webbadressen utan att ladda om webbsidan med JavaScript.
Hur ändrar man/ändrar webbadressen i JavaScript utan att ladda om sidan?
För att ändra webbadressen utan att ladda om webbsidan, använd följande fördefinierade JavaScript-metod:
Metod 1: Ändra webbadressen i JavaScript utan att ladda om sidan med metoden 'pushState()'
För att ändra webbadressen utan att ladda om webbsidan, använd ' pushState() 'metoden. Det är en funktion eller den fördefinierade metoden för ' historia Objekt ” som gör det möjligt att ändra webbläsarhistoriken utan att navigera eller uppdatera sidan. Den lägger bara till eller modifierar historikstacken och laddar inte en ny sida. Genom att använda detta tillvägagångssätt kan du växla fram och tillbaka mellan sidorna genom att lägga till en ny post i webbläsarens historikstack.
Syntax
Följ den givna syntaxen för metoden 'pushState()':
fönster. historia . pushState ( stat , titel , url ) ;
Här:
- ' stat ” representerar den nya historikposten.
- ' titel ” är den specifika text som kan visas i webbläsarens namnlist.
- ' url ” indikerar den ersatta URL:en som en ny post.
Exempel
Skapa fyra knappar i en HTML-fil som anropar ' modifyUrl() ” funktion på knappen klicka:
< knappen när du klickar = 'modifyUrl('CSS Tutorial', 'CSSTutorial.html');' > 2 knapp >
< knappen när du klickar = 'modifyUrl('JavaScript Tutorial', 'JavaScriptTutorial.html');' > 3 knapp >
< knappen när du klickar = 'modifyUrl('Java Tutorial', 'JavaTutorial.html');' > 4 knapp >
Definiera en funktion ' modifyUrl() ” i en JavaScript-fil som utlöses när knappen klickar. Det krävs två parametrar, ' titel ' och den ' url ”. När metoden anropas på knappen klickar, kommer 'titel' och 'url' att skickas som argument. Kontrollera typen av ' pushState ” av historikobjektet, om det inte är ” odefinierad ”. Ring sedan ' history.pushState() ” metod för att ändra webbadressen:
fungera modifyUrl ( titel , url ) {
om ( sorts ( historia. pushState ) != 'odefinierad' ) {
var obj = {
Titel : titel ,
URL : url
} ;
historia. pushState ( obj , obj. Titel , obj. URL ) ;
}
}
Det kan ses att för varje knappklick kommer webbadressen att ändras utan att sidan laddas om:
I utgången ovan kan du se att bakåtpilknappen uppe till vänster ( <- ) är aktiverat när du klickar på knappen, indikerar det att du kan navigera fram och tillbaka eftersom ' pushState() ”-metoden lägger till den nya URL:en i historikstacken.
Metod 2: Ändra webbadressen i JavaScript utan att ladda om sidan med metoden 'replaceState()'
Använd ' replaceState() ” metod för att ändra webbadressen utan att ladda om webbsidan. Det är också ett inslag i ' historia Objekt ” men det kommer inte att lägga till en ny post i historikstacken. Det ändrar det befintliga tillståndet för webbläsarens historik och ersätter det med ett nytt tillstånd. Genom att använda detta tillvägagångssätt kan du inte växla fram och tillbaka mellan sidorna.
Syntax
Den givna syntaxen används för metoden 'replaceState()':
Exempel
I den definierade funktionen, anrop ' replaceState() ” metod för att ersätta URL:en på knappen klicka utan att ladda om eller navigera på sidan:
om ( sorts ( historia. ersätt staten ) != 'odefinierad' ) {
var obj = {
Titel : titel ,
URL : url
} ;
historia. ersätt staten ( obj , obj. Titel , obj. URL ) ;
}
}
Utdata indikerar att webbadressen har ändrats vid varje knappklick och att det inte finns något alternativ att navigera för att gå tillbaka eftersom bakåtpilen är inaktiverad:
Vi har tillhandahållit all viktig information som är relevant för ändringen av webbadressen utan att ladda om sidan i JavaScript.
Slutsats
För att ändra/ändra webbadressen utan att uppdatera webbsidan, använd ' pushState() ' metoden eller ' replaceState() 'metoden. Metoden 'pushState()' lägger till den nya URL:en som en ny post i en historikstack och låter användare navigera fram och tillbaka. Medan metoden 'replaceState()' ersätter URL:en och inte tillåter att flytta till baksidan. Den här artikeln beskrev metoderna för att ändra webbadressen utan att ladda om webbsidan med JavaScript.