Poznajemy History API, lekcja krótka, łatwa i przyjemna, kontynuujemy poznawanie HTML/CSS/JS. Do dzieła.
Ok, History API ma trzy properties:
- length: ilość elementów w historii przeglądarki
- state: stan top-level elementu (głupota, ale jak chcemy podejrzeć, jak wyglądają stany to mamy, stanem może być każdy serializowalny obiekt)
- scrollRestoration: jedynie nie read-only property, teoretycznie ma sprawiać, że jak ustawimy na manual, to wracanie tam historią nie sprawi, że scroll będzie tam, gdzie był:
if (history.scrollRestoration) {
history.scrollRestoration = "manual";
}W praktyce różnie to bywa.
Ok, metody do zmieniania stron:
- back – do tyłu
- forward – do przodu
- go – od tyłu lub przodu i pozwala wybrać o ile (poprzednie bez parametrów)
history.forward();
history.back();
history.go(2);
history.go(-2);Metody do pracy z zawartością historii, wywołujące PopState Event:
- pushState
- replaceState
PushState, czyli chcemy dopisać do historii np. wejście na jakiś query param powiedzmy (przykład z MDN):
const url = new URL(location);
url.searchParams.set("foo", "bar");
history.pushState({}, "", url);Swoją drogą warto zwrócić uwagę, że to nam dodaje ten searchParam do URLa. Jak nie znamy url api mamy jeszcze jedno wyjście:
let url = window.location.href;
//'https://www.google.pl/'
let withParam = `${url}?q=${encodeURIComponent('hello world')}`;
//'https://www.google.pl/?q=hello%20world'
history.pushState({}, "", withParam);Swoją drogą nie możemy wpisywać do historii rzeczy z inną domeną, niż ta, na której jesteśmy.
