Czy istnieje sposób, w jaki mogę zmodyfikować adres URL bieżącej strony bez ponownego ładowania strony?

Chciałbym uzyskać dostęp do części przed , jeśli to możliwe.

Muszę tylko zmienić część po domeny, więc nie jest to, że naruszam polityki między domenie.

 window.location.href = "www.mysite.com/page2.php";  // Sadly this reloads
2727
Robin Rodricks 5 maj 2009, 14:54

16 odpowiedzi

Najlepsza odpowiedź

Można to teraz zrobić w Chrome, Safari, Firefox 4+ i Internet Explorer 10PP4 +!

Zobacz odpowiedź na to pytanie, aby uzyskać więcej informacji: Aktualizacja paska adresowego z nowym URL bez zniesławiania lub przeładowania strony

Przykład:

 function processAjaxData(response, urlPath){
     document.getElementById("content").innerHTML = response.html;
     document.title = response.pageTitle;
     window.history.pushState({"html":response.html,"pageTitle":response.pageTitle},"", urlPath);
 }

Następnie możesz użyć window.onpopstate, aby wykryć nawigacja przycisku do przodu:

window.onpopstate = function(e){
    if(e.state){
        document.getElementById("content").innerHTML = e.state.html;
        document.title = e.state.pageTitle;
    }
};

Dla bardziej dogłębnego spojrzenia na manipulującą historię przeglądarki, patrz Ten artykuł MDN.

2161
Peter Mortensen 17 marzec 2019, 09:06

HTML5 wprowadzono {x0}} i history.replaceState() metody, które umożliwiają dodawanie i modyfikowanie odpowiednio wpisów historii.

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

Przeczytaj więcej o tym od Oto

658
squarecandy 8 styczeń 2021, 18:58

Możesz także użyć HTML5 Wymiana , 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);
}

To "przerwa" funkcjonalność przycisku. Może to być wymagane w niektórych przypadkach, takich jak galeria obrazu (w której chcesz wrócić do tyłu powrotnego z powrotem do strony indeksu Galeria, zamiast wrócić przez każdy obraz, który oglądałeś) podczas gdy dając każdemu obrazowi własny unikalny adres URL.

148
George Filippakos 4 czerwiec 2014, 07:11

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

history.pushState({}, null, newUrl);
135
Peter Mortensen 17 marzec 2019, 09:30

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

Nie ma sposobu na zmodyfikowanie URL w przeglądarce bez ponownego ładowania strony. URL reprezentuje ostatnią załadowaną stronę. Jeśli go zmieniysz (document.location), przeładuj stronę.

Jednym z nich jest oczywisty powód, piszesz stronę na www.mysite.com, który wygląda jak strona logowania bankowego. Następnie zmieniasz pasek URL przeglądarki, aby powiedzieć www.mybank.com. Użytkownik będzie całkowicie nieświadomy, że naprawdę patrzą na www.mysite.com.

111
Peter Mortensen 4 listopad 2019, 11:39
parent.location.hash = "hello";
87
Martin. 23 marzec 2013, 17:57

W nowoczesnych przeglądarze i HTML5 jest metodą o nazwie pushState na oknie history. To zmieni adres URL i popchnie go do historii bez ładowania strony.

Możesz go użyć w ten sposób, zajmie 3 parametry, 1) obiekt stanowy 2) tytuł i adres URL):

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

Zmieni to URL, ale nie przeładuj stronę. Ponadto nie sprawdza, czy istnieje strona, więc jeśli zrobisz jakiś kod JavaScript, który reaguje na adres URL, możesz pracować z nimi w ten sposób.

Istnieje również history.replaceState(), co dokładnie robi to samo, z wyjątkiem tego, że będzie modyfikować bieżącą historię zamiast tworzyć nowy!

Również można utworzyć funkcję, aby sprawdzić, czy history.pushState istnieje, a następnie kontynuuj spoczynkę:

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 także zmienić # dla <HTML5 browsers, który nie przeładowuje strony. W ten sposób zastosowania kątowe do wykonania Spa Według Hashtag ...

Zmiana # jest dość łatwa, jak:

window.location.hash = "example";

I możesz go wykryć tak:

window.onhashchange = function () {
  console.log("#changed", window.location.hash);
}
32
Peter Mortensen 17 marzec 2019, 09:28

Wymieniona odpowiedź HTML5 jest odpowiedzią, jak już wspomniano przez Vivart i GEO1701. Jednak nie jest obsługiwane we wszystkich przeglądarkach / wersjach. History.js Okładanie funkcji stanu HTML5 i zapewnia dodatkowe wsparcie dla przeglądarek HTML4.

26
Thomas Stjernegaard Jeppesen 21 listopad 2012, 11:09

Przed HTML5 możemy użyć:

parent.location.hash = "hello";

I:

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

Ta metoda przeładowuje stronę, ale HTML5 wprowadzi history.pushState(page, caption, replace_url), który nie powinien przeładować strony.

24
Patrioticcow 26 luty 2015, 22:34

Jeśli co próbujesz zrobić, to pozwolić użytkownikom na zakładkę / udostępniać strony, a nie potrzebujesz, aby był dokładnie właściwy adres URL, i nie używasz kotwicy Hash dla niczego innego, możesz to zrobić w dwóch Części; Używasz lokalizacji

Na przykład:

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

2) Użytkownik wykonuje pewne działania, które zmienia adres URL do www.site.com/#/section/page/6 (z Hash). Powiedz, że załadowałeś poprawną treść na stronę 6 do strony, więc poza Hash użytkownik nie jest zbyt zakłócany.

3) Użytkownik przechodzi ten adres URL na kogoś innego lub zakładki

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

5) KOD ON www.site.com/ Przekierowuje użytkownika do www.site.com/section/page/6, używając czegoś takiego:

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

Mam nadzieję, że ma sens! To przydatne podejście do niektórych sytuacji.

23
Brane 10 styczeń 2018, 12:10

Poniżej znajduje się funkcja do zmiany adresu URL bez ponownego ładowania 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');
17
Onur A. 9 marzec 2019, 18:35

Wszelkie zmiany zlokowania (window.location lub {x1}}) spowodują żądanie tego nowego adresu URL, jeśli nie tylko zmieniasz fragmentu URL. Jeśli zmienisz adres URL, zmienisz adres URL.

Użyj technik przepisywania adresów URL serwera, takich jak Apache's Mod_rewrite Jeśli nie Podobnie jak URL, których obecnie używasz.

13
Gumbo 5 maj 2009, 10:58

Możesz dodać znaczniki kotwiczne. Używam tego na mojej stronie, aby można śledzić z Google Analytics, co ludzie odwiedzają na stronie.

Po prostu dodam znacznik 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);
11
Jean-François Fabre 19 styczeń 2020, 21:52

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

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

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

Całkiem pomocny wszystkim.

10
Dheeraj Thedijje 9 luty 2021, 07:39

Jak wskazano przez Thomasa Stjarnegaarda Jeppesena, można użyć History.js, aby zmodyfikować parametry URL, podczas gdy użytkownik Nawigaty za pośrednictwem linków i aplikacji Ajax.

Prawie rok minął od tej odpowiedzi, a historia.js wzrosła i stała się bardziej stabilna i przeglądarka. Teraz może być używany do zarządzania stanami historii w sprawozdaniu HTML5, a także w wielu przeglądarkach tylko HTML4. W tym demo możesz zobaczyć przykład tego, jak działa (jak jak również możliwość wypróbowania funkcjonalności i ograniczeń.

Jeśli potrzebujesz pomocy, jak korzystać i wdrożyć tę bibliotekę, sugeruję, aby spojrzeć na kod źródłowy strony DEMO: zobaczysz, że jest bardzo łatwy do zrobienia.

Wreszcie, aby uzyskać kompleksowe wyjaśnienie tego, co może być kwestiami dotyczącymi używania skrótów (i hashbangs), sprawdź Ten link przez Benjamin Lupton.

9
Erenor Paz 5 wrzesień 2013, 13:55

Użyj history.pushState() z interfejsu API HOTML 5.

Zapoznaj się z HISTO HISTORY API Więcej informacji.

8
Peter Mortensen 17 marzec 2019, 09:29