Gdybyś miał podać jedno słowo, które kojarzy ci się ze stronami FAQ – co by to było? Ja bez zastanowienia powiedziałabym – akordeon. Struktura prosta technicznie, prawda? Nudna jak flaczki z olejem, prawda? Ależ nic bardziej mylnego. Również strona FAQ jest w stanie przyprawić ciebie o lekki zawrót głowy. Sprawdź sam!
Zadanie wygląda następująco. Masz stworzyć standardową stronę FAQ w postaci wspomnianego akordeonu (odpowiedzi pokazują się pod pytaniami po kliknięciu na pytanie / strzałkę obok niego). Istotnym wymaganiem jest, aby aktualizować adres URL po rozwinięciu odpowiedzi. Np. po kliknięciu na pytanie „Ile kosztuje dojazd?”, adres URL powinien odpowiednio się zmienić na np. www.super-stolarz.pl/faq#ile-kosztuje-dojazd itd.
Wiem, co teraz powiecie. Hej, co w tym trudnego? Wystarczy do odpowiednich sekcji na stronie dodać id, a z pytań stworzyć odnośniki np.
<div id="ile-kosztuje-dojazd">
<a href="#ile-kosztuje-dojazd">Ile kosztuje dojazd?</>
Blabla
</div>Ale… to rozwiązanie nam się nie podoba, ponieważ każde kliknięcie na pytanie – rozwinięcie odpowiedzi – wiąże się z przeniesieniem jej na górę ekranu. Akurat w naszym przypadku to wygląda brzydko. Akurat w naszym przypadku odpowiedzi do pytań są zbyt krótkie. Akurat w naszym przypadku copywriter nic z tym nie chce zrobić. A więc akurat w naszym przypadku chcemy osiągnąć efekt zmiany adresu URL bez przeglądarkowego skoku do danej sekcji. Konkretną odpowiedź chcemy zobaczyć na samej górze tylko w przypadku, kiedy ją udostępniamy -> na świeżo wklejamy do przeglądarki jej adres. To co, masz jakiś pomysł?
// czas na myślenie
Uwaga, rozwiązania typu:
window.location.hash = '#ile-kosztuje-dojazd';również powodują „skok” do danej sekcji
// więcej czasu na myślenie
To jakie rozwiązanie działa?
A no na przykład takie (źródło):
history.pushState(null, null, "#ile-kosztuje-dojazd") pushState symuluje przejście na nową stronę. Zmienia adres URL, dodaje go do historii w przeglądarce, jednak użytkownik realnie pozostaje na tej samej stronie.
Ewentualnie możecie skorzystać z replaceState. Różnica jest oczywista – pushState dodaje kolejny element do historii przeglądarki, natomiast replaceState podmienia ostatni wpis w historii.
Omówmy jeszcze krótko parametry pushState/replaceState:
- Stan obiektu – dane, ustawienia które mają być dostępne dla strony wpisywanej w historię (
history.state) - Tytuł – nazwa strony, którą wpisujemy do historii przeglądarki – uwaga, atrybut nie jest wszędzie obsługiwany
- Adres URL, który ma pojawić się w pasku adresu przeglądarki (z tej samej domeny!), czyli jedyny parametr, który nas interesuje dla opisywanego przypadku.
Uważaj jednak na pushState. Ono jedynie wpisuje nowy adres URL do historii bez wiązania go z konkretnym dokumentem. Skutkuje to niespodziewanym działaniem przycisku „wstecz”. Albo raczej brakiem jego działania. Aby wyświetlać odpowiednie, zamierzone treści na stronie, najprawdopodobniej będziesz musiał zaprzyjaźnić się ze zdarzeniem popstate, które wywołuje się podczas każdego skoku w historii przeglądarki (zarówno do tyłu, jak i do przodu). Wtedy też przydatny okaże się pierwszy magiczny parametr pushState – mianowicie stan obiektu.
Więcej informacji o History API znajdziesz np. na MDN, albo HTML5 Doctor.
Jeśli masz inne pomysły na rozwiązanie problemu zmiany adresu URL bez odświeżania strony – koniecznie napisz o nich w komentarzu!
P.S. Czy wspomniane wymaganie jest w ogóle realne? Oj, jest. Skąd ono może się wziąć? Tutaj wchodzi zagadnienie SEO oraz linkowania wewnętrznego. Roboty internetowe to lubią. Dzięki nim łatwo ogarną treść twojej strony oraz jej strukturę. Poza tym – dedykowany URL dla każdego zagadnienia umożliwia dzielenie się nim!
