Jak zmodyfikować adres URL bez przeładowywania strony?

HTML5 wprowadził history.pushState() oraz history.replaceState() metody, które umożliwiają odpowiednio dodawanie i modyfikowanie wpisów historii.

window.history.pushState('page2', 'Title', '/page2.php');

Czytaj więcej na ten temat z tutaj

Możesz również użyć HTML5 replaceState Jeśli chcesz zmienić adres url, ale nie chcesz dodawać wpisu do historii przeglądarki:

if (window.history.replaceState) {
   //prevents browser from storing history with each change:
   window.history.replaceState(statedata, title, url);
}

Spowoduje to "złamanie" funkcji przycisku Wstecz. Może to być wymagane w niektórych przypadkach, takich jak Galeria obrazów (gdzie chcesz, aby przycisk Wstecz wracał do strony indeksu galerii zamiast przesuwać się z powrotem do każdego oglądanego obrazu), jednocześnie nadając każdemu obrazowi swój unikalny adres url.

Oto moje rozwiązanie (newUrl to Twój nowy URL, który chcesz zastąpić bieżącym):

history.pushState({}, null, newUrl);

Uwaga: Jeśli pracujesz z przeglądarką HTML5, powinieneś zignorować tę odpowiedź. Jest to teraz możliwe, co widać w innych odpowiedziach.

Nie ma możliwości modyfikacji URL w przeglądarce bez przeładowania strony. Adres URL reprezentuje ostatnią załadowaną stronę. Jeśli go zmienisz (document.location), to przeładuje stronę.

Jednym z oczywistych powodów jest to, że piszesz stronę na www.mysite.com, która wygląda jak strona logowania do banku. Następnie zmieniasz pasek adresu URL przeglądarki na powiedz www.mybank.com. Użytkownik będzie całkowicie nieświadomy, że naprawdę patrzy na www.mysite.com.

parent.location.hash = "hello";

W nowoczesnych przeglądarkach i HTML5 istnieje metoda o nazwie pushState w oknie history. Spowoduje to zmianę adresu URL i przesunięcie go do historii bez ładowania strony.

Możesz go używać w ten sposób, będzie to wymagało 3 parametrów, 1) obiektu stanu 2) tytułu i adresu URL):

window.history.pushState({page: "another"}, "another page", "example.html");

Spowoduje to zmianę adresu URL, ale nie przeładuje strony. Ponadto nie sprawdza, czy strona istnieje, więc jeśli wykonasz kod JavaScript, który reaguje na adres URL, możesz pracować z nimi jak to.

Istnieje również history.replaceState(), która robi dokładnie to samo, z tym, że modyfikuje bieżącą historię zamiast tworzyć nową!

Możesz również utworzyć funkcję, aby sprawdzić, czy history.pushState istnieje, a następnie kontynuować resztę w następujący sposób:

function goTo(page, title, url) {
  if ("undefined" !== typeof history.pushState) {
    history.pushState({page: page}, title, url);
  } else {
    window.location.assign(url);
  }
}

goTo("another page", "example", 'example.html');

Możesz również zmienić # na <HTML5 browsers, co nie spowoduje przeładowania strony. [24]} SPA zgodnie z hashtagiem...

Zmiana # jest dość łatwa, robiąc tak:

window.location.hash = "example";

I można to wykryć w następujący sposób:

window.onhashchange = function () {
  console.log("#changed", window.location.hash);
}

HTML5 replaceState jest odpowiedzią, jak już wspomniano przez Vivart i geo1701. Jednak nie jest on obsługiwany we wszystkich przeglądarkach/wersjach. Historia.js zawiera funkcje stanu HTML5 i zapewnia dodatkowe wsparcie dla przeglądarek HTML4.

Przed HTML5 możemy użyć:

parent.location.hash = "hello";

I:

window.location.replace("http:www.example.com");

Ta metoda przeładuje Twoją stronę, ale HTML5 wprowadził history.pushState(page, caption, replace_url), która nie powinna przeładowywać Twojej strony.

Jeśli próbujesz zezwolić użytkownikom na zakładki/udostępnianie stron, a nie potrzebujesz dokładnie odpowiedniego adresu URL i nie używasz kotwic haszujących do niczego innego, możesz to zrobić w dwóch częściach; używasz lokalizacji.hash omówione powyżej, a następnie zaimplementować sprawdzenie na stronie głównej, aby wyszukać adres URL z zakotwiczeniem w nim i przekierować do następnego wyniku.

Na przykład:

1) Użytkownik jest na www.site.com/section/page/4

2) użytkownik wykonuje jakąś akcję, która zmienia URL do www.site.com/#/section/page/6 (z Hashem). Powiedzmy, że załadowałeś poprawną treść dla strony 6, więc oprócz hasha użytkownik nie jest zbyt zaniepokojony.

3) Użytkownik przekazuje ten adres URL komuś innemu, lub zakłada go do zakładki

4) ktoś inny, lub ten sam użytkownik w późniejszym terminie, przechodzi do www.site.com/#/section/page/6

5) Kod na www.site.com/ przekierowuje użytkownika na www.site.com/section/page/6, używając czegoś takiego:

if (window.location.hash.length > 0){ 
   window.location = window.location.hash.substring(1);
}

Poniżej znajduje się funkcja zmiany adresu URL bez przeładowywania strony. Jest obsługiwany tylko dla HTML5.

  function ChangeUrl(page, url) {
        if (typeof (history.pushState) != "undefined") {
            var obj = {Page: page, Url: url};
            history.pushState(obj, obj.Page, obj.Url);
        } else {
            window.location.href = "homePage";
            // alert("Browser does not support HTML5.");
        }
    }

  ChangeUrl('Page1', 'homePage');

Wszelkie zmiany lokalizacji (window.location LUB document.location) spowodują żądanie dla tego nowego adresu URL, jeśli nie zmieniasz tylko fragmentu adresu URL. Jeśli zmienisz adres URL, zmienisz adres URL.

Użyj technik przepisywania adresów URL po stronie serwera, takich jak mod_rewrite Apache , Jeśli nie podobają ci się adresy URL, których obecnie używasz.

Możesz dodawać znaczniki zakotwiczenia. Używam tego na mojej stronie, dzięki czemu mogę śledzić za pomocą Google Analytics, co ludzie odwiedzają na stronie.

Po prostu dodaję tag anchor, a następnie część strony, którą chcę śledzić:

var trackCode = "/#" + urlencode($("myDiv").text());
window.location.href = "http://www.piano-chords.net" + trackCode;
pageTracker._trackPageview(trackCode);

Możesz użyć tej pięknej i prostej funkcji, aby tak więc w dowolnym miejscu w aplikacji.

function changeurl(url, title) {
    var new_url = '/' + url;
    window.history.pushState('data', title, new_url);
    
}

Możesz nie tylko edytować adres URL, ale także aktualizować tytuł wraz z nim.

Jak zauważył Thomas Stjernegaard Jeppesen, możesz użyć historii.js , aby zmodyfikować parametry URL, podczas gdy użytkownik przechodzi przez łącza Ajax i aplikacje.

Minął prawie rok od tej odpowiedzi, a historiajs rosła i stała się bardziej stabilna i cross-browser. Teraz może być używany do zarządzania stanami historii w zgodnych z HTML5, jak również w wielu przeglądarkach tylko HTML4. w tym demo można zobaczyć przykład, jak to działa (a także możliwość wypróbowania jego funkcjonalności i ograniczenia.

Jeśli potrzebujesz pomocy w użyciu i zaimplementowaniu tej biblioteki, proponuję rzucić okiem na kod źródłowy strony demo: zobaczysz, że jest to bardzo łatwe do zrobienia.

Wreszcie, aby uzyskać wyczerpujące wyjaśnienie, jakie mogą być problemy związane z używaniem hashów (i hashbangów), sprawdź ten link autorstwa Benjamina Luptona.

Użyj history.pushState() z HTML 5 History API.

.

Twój nowy url.

let newUrlIS =  window.location.origin + '/user/profile/management';

W pewnym sensie wywołanie pushState() jest podobne do Ustawienia okna.location = "#foo", w którym oba będą również tworzyć i aktywować inny wpis historii związany z bieżącym dokumentem. Ale pushState () ma kilka zalet:

history.pushState({}, null, newUrlIS);

Ten kod działa dla mnie. Użyłem go do mojej aplikacji w ajax.

history.pushState({ foo: 'bar' }, '', '/bank');

Po załadowaniu strony do ID za pomocą ajax, Zmienia Adres URL przeglądarki automatycznie bez przeładowywania strony.

To jest funkcja ajax poniżej.

function showData(){
    $.ajax({
      type: "POST",
      url: "Bank.php", 
      data: {}, 
      success: function(html){          
        $("#viewpage").html(html).show();
        $("#viewpage").css("margin-left","0px");
      }
    });
  }

Przykład: z dowolnej strony lub kontrolera, takiego jak" Dashboard", kiedy klikam na bank, ładuje listę banków za pomocą kodu ajax bez przeładowywania strony. W tej chwili adres URL przeglądarki nie zostanie zmieniony.

history.pushState({ foo: 'bar' }, '', '/bank');

Ale kiedy użyję tego kodu do ajax, Zmienia Adres URL przeglądarki bez przeładowywania strony. To jest pełny kod ajax tutaj w poniżej.

function showData(){
        $.ajax({
          type: "POST",
          url: "Bank.php", 
          data: {}, 
          success: function(html){          
            $("#viewpage").html(html).show();
            $("#viewpage").css("margin-left","0px");
            history.pushState({ foo: 'bar' }, '', '/bank');
          }
        });
      }

To wszystko, czego potrzebujesz, aby poruszać się bez przeładowania

// add setting without reload 
location.hash = "setting";

// if url change with hash do somthing
window.addEventListener('hashchange', () => {
    console.log('url hash changed!');
});

// if url change do somthing (dont detect changes with hash)
//window.addEventListener('locationchange', function(){
//    console.log('url changed!');
//})


// remove #setting without reload 

history.back();