Aktualizowanie paska adresu o nowy adres URL bez mieszania lub przeładowywania strony

643

Albo marzyłem o chrome (dev channel) wdrażającym sposób aktualizacji paska adresu za pomocą javascript (ścieżki, a nie domeny) bez ponownego ładowania strony lub naprawdę to zrobili.

Nie mogę jednak znaleźć artykułu, który uważam za przeczytany.

Czy jestem szalony, czy jest na to sposób (w Chrome)?

ps Nie mówię o window.location.hash, i in. Jeśli powyższe istnieje, odpowiedź na to pytanie będzie nieprawdziwa.

javascript ajax google-chrome David Murdoch
źródło
3
Możliwy duplikat Zmodyfikuj adres URL bez ponownego ładowania strony
Tobias Kienzler
1
@tobiaskienzler Kiedy to pytanie zostało pierwotnie zadane w 2009 roku, nie było możliwe.
David Murdoch
3
Oczywiście nie. Ale teraz jest tak, pytania wymagają tego samego. Szkoda, że ​​ta druga przyjęła nieaktualną odpowiedź (zauważyłem przez ciebie) ... Wiesz co? Zamknijmy się na odwrót, nikt nie powiedział, że „oryginał” musi być starszy, w rzeczywistości istnieją precedensy
Tobias Kienzler
@tobiaskienzler, inne pytanie nie ma nieaktualnej zaakceptowanej odpowiedzi.
David Murdoch
2
@TobiasKienzler to 6-letnie pytanie, dlaczego musisz się tym przejmować? Po prostu ciesz się niesamowitą odpowiedzią i zaimplementuj ją w swojej aplikacji. Przez 6 lat tysiące użytkowników SO zgodziło się, że to niesamowite pytania, zostaw to tak, jak jest.
Imam Assidiqqi

Odpowiedzi:

874

Możesz to teraz zrobić w większości „nowoczesnych” przeglądarek!

Oto oryginalny artykuł, który przeczytałem (opublikowany 10 lipca 2010 r.): HTML5: Zmiana adresu URL przeglądarki bez odświeżania strony .

Bardziej dogłębne spojrzenie na pushState / replaceState / popstate (alias API HTML5 History API) znajduje się w dokumentacji MDN .

TL; DR, możesz to zrobić:

window.history.pushState("object or string", "Title", "/new-url");

Zobacz moją odpowiedź na temat modyfikowania adresu URL bez ponownego ładowania strony, aby uzyskać podstawowe instrukcje.

David Murdoch
źródło
3
Ach, funkcjonalność jest w WebKit i wylądowała kilka miesięcy temu < bugs.webkit.org/show_bug.cgi?id=36152 >. Niezłe znalezisko!
najstarszylivingboy
6
jest to teraz używane przez github, natomiast nawigacja po drzewach
Valerij
1
@Vprimachenko: Tak. I raz na jakiś czas łamią mi przycisk powrotu.
David Murdoch
Można to teraz zrobić w Chrome, Safari, FF4 + i IE10pp3 +! (Od odpowiedzi Davida Murdocha na stackoverflow.com/questions/824349/... )
Zach Lysobey,
11
Protip: z tymi funkcjami możesz także korzystać ze ścieżek względnych (np . ../new-urlLub ../../new-url. Wydają się one robić to, czego można się spodziewać w Chrome przynajmniej.
Mahn
156

Zmienianie tylko tego, co jest po skrócie - stare przeglądarki

document.location.hash = 'lookAtMeNow';

Zmiana pełnego adresu URL. Chrome, Firefox, IE10 +

history.pushState('data to be passed', 'Title of the page', '/test');

Powyższe spowoduje dodanie nowego wpisu do historii, dzięki czemu możesz nacisnąć przycisk Wstecz, aby przejść do poprzedniego stanu. Aby zmienić adres URL bez dodawania nowego wpisu do historii, użyj

history.replaceState('data to be passed', 'Title of the page', '/test');

Spróbuj uruchomić je teraz w konsoli!

Paweł
źródło
13
replaceStatebyło dokładnie to, czego potrzebowałem, dzięki za rozwinięcie oryginalnej odpowiedzi.
Choylton B. Higginbottom,
„domena i protokół muszą być takie same jak oryginalne!” Zapobiega to zmianie adresu URL paska adresu przez niektóre witryny rybackie.
Rick
3
Nie należy przekazywać bezwzględnego adresu URL do tej funkcji. Jeśli to zrobisz, najprawdopodobniej musisz zbudować go dynamicznie z bieżącego schematu, hosta i portu - co jest dużym nakładem pracy, gdy możesz po prostu uczynić go względnym adresem URL („foo.html” lub nawet „/foo.html ”) i pozwól przeglądarce się tym zająć.
DimeCadmium
1
@DimeCadmium ładne uproszczenie. Zaktualizowano
Paweł
history.replaceStatedodaj do historii w ff 66.0b1
azzamsa
33

Zaktualizuj odpowiedź Davidsa, aby wykrywać nawet przeglądarki, które nie obsługują pushstate:

if (history.pushState) {
  window.history.pushState("object or string", "Title", "/new-url");
} else {
  document.location.href = "/new-url";
}
metamagikum
źródło
9
document.location.href ponownie ładuje stronę
paullb
1 
var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?foo=bar';
window.history.pushState({path:newurl},'',newurl);
Kevin Mendez
źródło
3
Ten fragment kodu może rozwiązać pytanie, ale wyjaśnienie naprawdę pomaga poprawić jakość posta. Pamiętaj, że w przyszłości odpowiadasz na pytanie czytelników, a ci ludzie mogą nie znać przyczyn Twojej sugestii kodu.
MaxiMouse
@MaxiMouse dziękuję za twoją niezłomność, wezmę to pod uwagę.
Kevin Mendez