Modyfikuj 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

UWAGA: jeśli pracujesz z HTML5 przeglądarką, 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ę.

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.

parent.location.hash = "hello";

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

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

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);
}

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 http://www.piano-chords.net / abym mógł śledzić za pomocą google analytics, co ludzie odwiedzają na stronie. Po prostu dodaję tag kotwicy, 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);

Poniżej znajduje się funkcja zmiany adresu URL bez przeładowywania strony. To tylko wsparcie 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');

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");

To zmieni adres url, ale nie przeładuje strony, również 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żna również utworzyć funkcję, aby sprawdzić, czy historia.pushState istnieje, a następnie kontynuuj z resztą tak:

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, w ten sposób Angular użyj 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);
}

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.

Jest to możliwe bez użycia hashów, spójrz na asual jQuery Address plugin :

Przykład tutaj .

Zauważ, że będzie używał hashów w IE, nie ma dla niego obejścia.

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

Zobacz link po więcej szczegółów HTML5 History API

Użyj window.history.pushState("object or string", "Title", "/new-url"), ale nadal wysyła nowe żądanie url do serwera

Zakładając, że nie próbujesz zrobić czegoś złośliwego, wszystko, co chcesz zrobić z własnymi adresami URL, może zostać magiczne za pomocą htaccess .