W tym artykule opisano metody modyfikowania adresu URL bez ponownego ładowania strony internetowej za pomocą JavaScript.
Jak zmodyfikować/zmienić adres URL w JavaScript bez ponownego ładowania strony?
Aby zmodyfikować adres URL bez ponownego ładowania strony internetowej, użyj następującej predefiniowanej metody JavaScript:
Metoda 1: Zmodyfikuj adres URL w JavaScript bez ponownego ładowania strony przy użyciu metody „pushState()”.
Aby zmodyfikować adres URL bez ponownego ładowania strony internetowej, użyj opcji „ PushState() ' metoda. Jest to funkcja lub predefiniowana metoda „ historia Obiekt ”, która umożliwia zmianę historii przeglądarki bez nawigacji lub odświeżania strony. Po prostu dodaje lub modyfikuje stos historii i nie ładuje nowej strony. Korzystając z tego podejścia, możesz przełączać się między stronami, dodając nowy wpis do stosu historii przeglądarki.
Składnia
Postępuj zgodnie ze składnią metody „pushState()”:
okno. historia . PushState ( państwo , tytuł , adres URL ) ;
Tutaj:
- “ państwo ” reprezentuje nowy wpis historii.
- “ tytuł ” to konkretny tekst, który może być wyświetlany na pasku tytułowym przeglądarki.
- “ adres URL ” oznacza zastąpiony adres URL jako nowy wpis.
Przykład
W pliku HTML utwórz cztery przyciski wywołujące „ zmodyfikujUrl() ” funkcja na przycisk kliknij:
< przycisk po kliknięciu = 'modifyUrl('CSS Tutorial', 'CSSTutorial.html');' > 2 przycisk >
< przycisk po kliknięciu = 'modifyUrl('Tutorial JavaScript', 'JavaScriptTutorial.html');' > 3 przycisk >
< przycisk po kliknięciu = 'modifyUrl('Tutorial Java', 'JavaTutorial.html');' > 4 przycisk >
Zdefiniuj funkcję „ zmodyfikujUrl() ” w pliku JavaScript, który zostanie uruchomiony po kliknięciu przycisku. Przyjmuje dwa parametry, „ tytuł ” i „ adres URL ”. Kiedy metoda jest wywoływana po kliknięciu przycisku, „tytuł” i „adres URL” zostaną przekazane jako argumenty. Sprawdź typ „ PushState ” obiektu historii, jeśli nie jest to „ nieokreślony ”. Następnie zadzwoń do „ historia.pushState() ”, aby zmienić adres URL:
funkcjonować zmodyfikujUrl ( tytuł , adres URL ) {
Jeśli ( typ ( historia. PushState ) != 'nieokreślony' ) {
był obj = {
Tytuł : tytuł ,
adres URL : adres URL
} ;
historia. PushState ( obj , obj. Tytuł , obj. adres URL ) ;
}
}
Można zauważyć, że przy każdym kliknięciu przycisku adres URL zostanie pomyślnie zmieniony bez przeładowywania strony:
Na powyższym wyjściu widać, że przycisk strzałki wstecz w lewym górnym rogu ( <- ) jest włączony podczas klikania przycisku, oznacza to, że możesz nawigować tam iz powrotem, ponieważ „ PushState() ” dodaje nowy adres URL do stosu historii.
Metoda 2: Zmodyfikuj adres URL w JavaScript bez ponownego ładowania strony przy użyciu metody „replaceState()”.
Użyj ' zamień stan() ” metoda modyfikacji adresu URL bez ponownego ładowania strony internetowej. Jest to również cecha „ historia Obiekt ”, ale nie doda nowego wpisu do stosu historii. Zmienia istniejący stan historii przeglądarki i zastępuje go nowym stanem. Korzystając z tego podejścia, nie możesz przełączać się między stronami.
Składnia
Podana składnia jest używana dla metody „replaceState()”:
Przykład
W zdefiniowanej funkcji wywołaj „ zamień stan() ”, aby zastąpić adres URL po kliknięciu przycisku bez ponownego ładowania lub nawigacji po stronie:
Jeśli ( typ ( historia. zamień stan ) != 'nieokreślony' ) {
był obj = {
Tytuł : tytuł ,
adres URL : adres URL
} ;
historia. zamień stan ( obj , obj. Tytuł , obj. adres URL ) ;
}
}
Dane wyjściowe wskazują, że przy każdym kliknięciu przycisku adres URL został zmieniony i nie ma opcji nawigacji w celu powrotu, ponieważ przycisk strzałki wstecz jest wyłączony:
Podaliśmy wszystkie istotne informacje dotyczące modyfikacji adresu URL bez przeładowywania strony w JavaScript.
Wniosek
Aby zmodyfikować/zmienić adres URL bez odświeżania strony internetowej, użyj opcji „ PushState() ” metoda lub „ zamień stan() ' metoda. Metoda „pushState()” dodaje nowy adres URL jako nowy wpis w stosie historii i umożliwia użytkownikom nawigację tam i z powrotem. Natomiast metoda „replaceState()” zastępuje adres URL i nie pozwala na przejście do ostatniej strony. W tym artykule opisano metody modyfikowania adresu URL bez ponownego ładowania strony internetowej za pomocą JavaScript.