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

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