Jak zmodyfikować adres URL w JavaScript bez ponownego załadunku strony

Zmiana adresu URL bez ponownego ładowania strony może być bardzo pomocną strategią tworzenia bardziej ekscytujących i dynamicznych stron internetowych za pomocą JavaScript. Na przykład tworzenie jednostronicowej strony internetowej, w której użytkownik wchodzi w interakcje z różnymi częściami/sekcjami strony bez nawigacji/przekierowania na nową stronę. Może to spowodować bardziej spójne i responsywne wrażenia użytkownika.

W tym artykule opisano metody modyfikowania adresu URL bez ponownego załadowania strony internetowej za pomocą JavaScript.

Jak zmodyfikować/zmienić adres URL w JavaScript bez ponownego załadunku strony?

Aby zmodyfikować adres URL bez przeładowania strony internetowej, użyj następującej predefiniowanej metody JavaScript:

• metoda pushstate ()
• Metoda zamiennika ()

Metoda 1: Zmodyfikuj adres URL w JavaScript bez ponownego załadunku strony za pomocą metody „pushState ()”

Aby zmodyfikować adres URL bez przeładowania strony internetowej, użyj „pushstate ()" metoda. Jest to funkcja lub predefiniowana metoda „obiekt historii”To pozwala na 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 z podaną składnią do metody „pushState ()”:

okno.historia.pushstate (stan, tytuł, URL);

Tutaj:

• "państwo”Reprezentuje nowy wpis historii.
• "tytuł”To konkretny tekst, który można wyświetlić na pasku tytułowej przeglądarki.
• "URL”Wskazuje zastąpiony adres URL jako nowy wpis.

Przykład
W pliku HTML utwórz cztery przyciski, które nazywają „modyfifyUrl ()„Funkcja przycisku Kliknij:

1
2
3
4

Zdefiniuj funkcję „modyfifyUrl ()”W pliku JavaScript, który uruchomi się przy przycisku. Wymaga dwóch parametrów, „tytuł”I„ „URL". Gdy metoda zostanie wywołana na przycisku kliknięcie, „tytuł” ​​i „URL” zostaną przekazane jako argumenty. Sprawdź typ „pushstate”Obiekt historii, jeśli nie jest to„nieokreślony". Następnie zadzwoń do „historia.pushstate ()„Metoda zmiany adresu URL:

funkcja modyfifyUrl (tytuł, url)
if (typeof (historia.pushstate) != „Undefined”)
var obj =
Tytuł: Tytuł,
URL: URL
;
historia.pushstate (obj, obj.Tytuł, obj.URL);

Można zauważyć, że przy każdym kliknięciu przycisku adres URL zostanie z powodzeniem zmieniony bez ponownego załadowania strony:

Na powyższym wyjściu widać, że przycisk strzałki tylnej w lewym górnym rogu (<-) jest włączony podczas klikania przycisku, wskazuje, że możesz poruszać się tam iz powrotem, ponieważ „pushstate ()”Metoda dodaje nowy adres URL na stosie historii.

Metoda 2: Zmodyfikuj adres URL w JavaScript bez ponownego załadowania strony za pomocą metody „Zamiennik ()”

Użyj "zamiennik ()”Metoda modyfikowania adresu URL bez ponownego załadunku strony internetowej. Jest to również funkcja „obiekt historii”Ale nie doda nowego wpisu do stosu historii. Zmienia istniejący stan historii przeglądarki i zastępuje ją nowym stanem. Korzystając z tego podejścia, nie możesz przełączać się między stronami.

Składnia
Podana składnia jest wykorzystywana do metody „zamiennika ()”:

okno.historia.zamiennik (stan, tytuł, URL);

Przykład
W określonej funkcji wywołaj „zamiennik ()„Metoda wymiany adresu URL na przycisku Kliknij bez ponownego załadunku lub nawigacji na stronie:

funkcja modyfifyUrl (tytuł, url)
if (typeof (historia.zamiennik) != „Undefined”)
var obj =
Tytuł: Tytuł,
URL: URL
;
historia.zamiennik (obj, obj.Tytuł, obj.URL);

Wyjście wskazuje, że przy kliknięciu każdego przycisku adres URL został zmieniony i nie ma opcji nawigacji, aby wrócić, gdy przycisk strzałki z tyłu jest wyłączony:

Podaliśmy wszystkie podstawowe informacje istotne dla modyfikacji adresu URL bez ponownego ładowania strony w JavaScript.

Wniosek

Aby zmodyfikować/zmienić adres URL bez odświeżenia strony internetowej, użyj „pushstate ()”Metoda lub„zamiennik ()" metoda. Metoda „pushState ()” dodaje nowy adres URL jako nowy wpis w stosie historii i pozwala użytkownikom nawigować w przód. Podczas gdy metoda „zamiennika ()” zastępuje adres URL i nie pozwala przejść na tylną stronę. W tym artykule opisano metody modyfikacji adresu URL bez ponownego załadowania strony internetowej za pomocą JavaScript.