window.history.pushState odświeżanie przeglądarki

Question

Pracuję nad kodem javascript, i używając window.History.pushState załadować nowe strony HTML, zamiast używać tagów href. Mój kod (który jest działa dobrze) wygląda następująco.

window.History.pushState({urlPath:'/page1'},"",'/page1') 

dziwnie, to nie, czyli przeładowuje przeglądarce

window.History.pushState({urlPath:'/page2.php'},"",'/page2.php') 

Ale to działa, treść jest aktualizowana przeglądarka nie odświeżony! (Zauważ, że adres URL jest bezwzględny i nie względny)

window.History.pushState({urlPath:'www.domain.com/page2.php'},"",'www.domain.com/page2.php') 

documentation dla window.History.pushState mówi, że trzeci URL parametr może być bezwzględny lub względny -

URL - URL nowej historii wpisu jest podana przez ten parametr. Uwaga: , że przeglądarka nie spróbuje załadować tego adresu URL po wywołaniu do parametru pushState(), ale może spróbować załadować adres URL później, na przykład po ponownym uruchomieniu przeglądarki. Nowy adres URL nie musi być bezwzględnym numerem ; jeśli jest względny, jest rozwiązywany względem bieżącego adresu URL. Nowy adres URL musi być tego samego pochodzenia co bieżący adres URL; w przeciwnym razie, pushState() spowoduje zgłoszenie wyjątku. Ten parametr jest opcjonalny; jeśli nie jest określony, jest ustawiony na bieżący adres URL dokumentu.

Wydaje się, że bezwzględne adresy URL działają, ale wydaje się, że nie są względne. Dlaczego to się dzieje?

Answer 1

Krótka odpowiedź jest taka, że ​​history.pushState (nie History.pushState, które mogłyby rzucić wyjątek, window część jest opcjonalna) nigdy nie będzie robić to, co sugerujesz.

Jeśli strony są odświeżane, jest to spowodowane innymi czynnikami, które robisz (na przykład możesz mieć uruchomiony kod, który przechodzi do nowej lokalizacji w przypadku zmiany paska adresu).

history.pushState({urlPath:'/page2.php'},"",'/page2.php') działa dokładnie tak, jak powinien w najnowszych wersjach Chrome, IE i Firefox dla mnie i moich współpracowników.

W rzeczywistości możesz włożyć dowolną funkcję do funkcji: history.pushState({}, '', 'So long and thanks for all the fish.not a real file').

Jeśli zamieścisz więcej kodu (ze szczególnym uwzględnieniem kodu znajdującego się w pobliżu history.pushState i wszędzie tam, gdzie jest używane document.location), z przyjemnością pomożemy ci ustalić, skąd dokładnie pochodzi ten problem.

Jeśli opublikujesz więcej kodu, zaktualizuję tę odpowiedź (mam pytanie, które Cię interesuje) :).

Answer 2

window.history.pushState({urlPath:'/page1'},"",'/page1') 

Działa tylko po wczytaniu strony, a po kliknięciu przycisku odświeżania nie oznacza to, że istnieje prawdziwy adres URL.

To, co powinieneś zrobić, to wiedzieć, do którego adresu URL przekierowywujesz po przeładowaniu tej strony. Na tej stronie można uzyskać warunki, pobierając aktualny adres URL i spełniając wszystkie warunki.

Answer 3

Jak sugerowali inni, nie wyjaśniasz jasno swojego problemu, tego, co próbujesz zrobić, ani jakie są Twoje oczekiwania co do tego, co ta funkcja ma faktycznie robić.

Jeśli dobrze zrozumiałem, to oczekuje się, że ta funkcja odświeży stronę (w rzeczywistości używa się terminu "ponownie ładuje przeglądarkę").

Jednak ta funkcja nie służy do ponownego ładowania przeglądarki.

Funkcja ta polega na dodaniu (wypchnięciu) nowego "stanu" do historii przeglądarki, aby w przyszłości użytkownik mógł powrócić do stanu, w którym znajduje się strona internetowa.

Zwykle jest to używane w połączeniu z połączeniami AJAX (które odświeżają tylko część strony).

Na przykład, jeśli użytkownik wyszukuje "KOTY" w jednym z pól wyszukiwania, a wyniki wyszukiwania (przypuszczalnie śliczne zdjęcia kotów) są ładowane z powrotem przez AJAX, w dolny prawy róg strony - wtedy twój stan strony nie zostanie zmieniony. Innymi słowy, w niedalekiej przyszłości, kiedy użytkownik zdecyduje, że chce wrócić do swojego wyszukiwania "KOTÓW", nie będzie mógł tego zrobić, ponieważ państwo nie istnieje w jego historii. Będzie mógł kliknąć tylko na puste pole wyszukiwania.

Stąd potrzeba funkcji

history.pushState({},"Results for `Cats`",'url.html?s=cats'); 

Jest przeznaczony jako sposób umożliwienia programista jednoznacznie określać swoje poszukiwania do historii szlaku użytkownika. To wszystko, co ma zrobić.

Gdy funkcja działa poprawnie, jedyną rzeczą, jakiej powinieneś się spodziewać, jest adres w pasku adresu przeglądarki zmieniający się na dowolny adres URL.

Jeśli już to rozumiesz, przepraszam za tę długą preambułę. Ale brzmi to od sposobu, w jaki stawiasz pytanie, którego nie masz.

Odłożyłem na bok pewne sprzeczności między sposobem opisanym w dokumentacji, a tym, jak działa w rzeczywistości. Uważam, że nie warto używać pustych lub pustych wartości jako parametrów.

Zobacz moją odpowiedź na this SO question. Dlatego polecam umieszczenie opisu w twoim drugim parametrze. Z pamięci jest to opis, który użytkownik widzi w menu rozwijanym, gdy klika i przytrzymuje przycisk myszy nad przyciskiem "wstecz".