Wprowadzone od czasów Gecko2 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)
HTML5 wprowadza dwie metody: histtory.pushState() oraz history.replaceState(), które umożliwiają dodawanie i modyfikowanie encji historii. Jednocześnie te metody działają z zdarzeniem window.onpostate.
Zmodyfikuj referrer za pomocą metody history.pushState(), którą można użyć w nagłówku http utworzonym dla obiektu xmlhttpRequest po modyfikacji stanu. Ten referer będzie adresem URL dokumentu w momencie utworzenia XMLHttpRequest.
pushState służy do dodania rekordu aktualnej strony do historii, natomiast replaceState i pushState są używane dokładnie tak samo, jedyną różnicą jest to, że służy do modyfikacji rekordu aktualnej strony w historii.
przykład
Załóżmy, że http://mozilla.org/foo.html strona wykonuje JS
var stateObj = { foo: "bar" }; history.pushState(stateObj, "page 2", "bar.html");
Ta metoda sprawi, że pasek adresowy URL wyświetli http://mozilla.org/bar.html,Ale przeglądarka nie ładuje bar.html strony, nawet jeśli istnieje。
Znowu załóżmy, że użytkownik nadal korzysta z http://google.com i klika z powrotem. W tym momencie pasek adresowy URL http://mozilla.org/bar.html strona otrzyma zdarzenie popstate (chrome), które będzie zawierać kopię stateObj. Ta strona wygląda jak foo.html. +
W tym momencie klikamy ponownie, a adres URL się odwróci http://mozilla.org/foo.html,document pojawi się kolejne zdarzenie popstate oraz obiekt stanu null. To działanie nie zmienia treści dokumentu. (Może po jakimś czasie spróbuje się załadować...) chrom)
Metoda pushState
pushState() ma trzy parametry: obiekt stanu, tytuł (obecnie ignorowany, nieobsługiwany), URL (opcjonalny). Szczegóły:
· obiekt stanu – Obiekt stanu to obiekt Javascrip{filter}t, który odnosi się do nowej jednostki historii utworzonej metodą pushState(). Służy do przechowywania informacji o wpisach, które chcesz wstawić do historii. Obiektem stanu może być dowolny ciąg Json. Ponieważ Firefox korzysta z dysku twardego użytkownika do dostępu do obiektu stanu, maksymalna przestrzeń pamięci tego obiektu wynosi 640k. Jeśli jest większa niż ta wartość, metoda pushState() wyrzuca wyjątek. Jeśli potrzebujesz więcej miejsca na przechowywanie, użyj lokalnego magazynu.
· tytuł — Firefox obecnie ignoruje ten parametr, choć może być używany w przyszłości. Najbezpieczniejszym sposobem na jego używanie jest teraz przekazanie pustego ciągu łańcucha, aby zapobiec przyszłym modyfikacjom. Możesz też przekazać krótki tytuł własności, aby wskazać stan
· URL - Ten parametr służy do przekazania adresu URL nowej jednostki historii, należy zauważyć, że przeglądarka nie załaduje tego adresu po wywołaniu metody pushState(). Ale może po jakimś czasie spróbuje załadować ten URL. Na przykład po ponownym uruchomieniu przeglądarki nowy adres URL może nie być absolutną ścieżką. Jeśli jest to ścieżka względna, to będzie relatywna względem istniejącego URL. Nowy adres URL musi być współdomenowany z istniejącym URL, w przeciwnym razie pushState() wygeneruje wyjątek. Ten parametr jest opcjonalny, a jeśli jest pusty, zostanie umieszczony jako aktualny adres URL dokumentu.
W pewnym sensie wywołanie metody pushState() jest podobne do ustawienia window.locatio{filter}n = "#foo", które tworzą i aktywują inną jednostkę historii powiązaną z aktualnym dokumentem, ale pushState() ma dodatkowe zalety:
Nowy adres URL może być dowolnym URL, który znajduje się w tej samej domenie co obecny URL, w przeciwieństwie do tego, że window.locatio{filter}n pozostaje w tym samym dokumencie, jeśli ustawiony jest tylko hash.
L Możesz zostawić adres URL bez zmian, jeśli nie musisz. Dla porównania, ustaw window.locatio{filter}n = "#foo"; Generowane są tylko nowe jednostki historyczne, jeśli Twój obecny hash nie jest #foo
Możesz powiązać dowolne dane z nową jednostką historii. W podejściu opartym na hashu wszystkie istotne dane muszą być zakodowane w krótki ciąg znaków.
Należy zauważyć, że metoda pushState() nie powoduje czasu zmiany skrótu, nawet jeśli stary i nowy adres URL to po prostu różne hashe.
metoda replaceState()
history.replaceState() jest używany podobnie jak pushState(), z tą różnicą, że replaceState() służy do modyfikacji aktualnej jednostki historii zamiast tworzenia nowej. Ta metoda bywa czasem przydatna, gdy trzeba zaktualizować obiekt stanu lub aktualną encję historii w odpowiedzi na określone zachowanie użytkownika, a także możesz użyć jej do aktualizacji adresu URL obiektu stanu lub aktualnej jednostki historii.
Wydarzenie Popstate
Gdy encja historii zostanie zmieniona, wystąpi zdarzenie popstate. Jeśli jednostka historii jest generowana przez metody pushState i replaceState, atrybut stanu zdarzenia popstate będzie zawierał kopię obiektu stanu z jednostki historycznej
Szczegóły znajdziesz na window.onpopstate
Przeczytaj aktualny stan
Przeczytaj istniejący stan
Po ładowaniu strony może mieć obiekt stanu niepusty. Może się to zdarzyć, gdy strona ustawi obiekt stanu (za pomocą pushState lub replaceState), a użytkownik ponownie uruchamia przeglądarkę. Po ponownym ładowaniu strony strona otrzyma zdarzenie onload, ale nie pojawi się zdarzenie popstate. Jednak jeśli przeczytasz właściwość history.state, otrzymasz ten obiekt stanu po wystąpieniu zdarzenia popstate
Dokumentacja History.pushState(): https://developer.mozilla.org/zh-CN/docs/Web/API/History/pushState
Parametrem odbiorczego adresu URL jest ciąg typu, który służy do zmiany adresu URL aktualnego paska adresowego. Warto zauważyć, że ten parametr nie może być taki sam jak w międzydomenowym pasku, czyli protokół, nazwa domeny i port muszą być takie same.
Niezłapana DOMException: Nie udało się wykonać 'pushState' na 'Historii': Obiekt stanu historii z adresem URL 'http://www.test.com/' nie może zostać utworzony w dokumencie o pochodzeniu ' https://www.itsvse.com' i URL 'https://www.itsvse.com/'.
przy <anonymous>:1:9
Poprawny kod:
|
Opublikowano 12.09.2017 13:55:04
|
|
|
|
Opublikowano 27.10.2017 09:51:10