MC, 11:41 czwartek, 27.06.2013 r.
Ilustracja do artykułu: Javascript - Dostęp do kotwic (hashy) z linka i ich obsługa

Javascript - Dostęp do kotwic (hashy) z linka i ich obsługa

Notatka w temacie obsługi kotwic, czyli często spotykanych w linkach treści poprzedzonych hashem #.

Jakie znowu kotwice?

Istnienie kotwic, czy hashy w adresach hiperłącz zapewne nie jest dla nikogo niespodzianką, bo każdy je widział, co najwyżej nie każdy wie po co są. Dlatego w kilku słowach spróbujmy opisać ten mechanizm od strony praktycznej. Załóżmy że do strony kieruje nas link:
http://www.mblog.boo.pl/index.php#JakasKotwica
Dołączona do niego kotwica została wytłuszczona. No dobrze, kotwica jest, tylko po co? Otóż kotwica jest informacją dla przeglądarki, do którego miejsca na wskazanej stronie, ma zostać przewinięty widok w oknie. Miejsce takie wskazuje w treści strony element:
<a name="JakasKotwica"></a>
Czyli znacznik odpowiadający za tworzenie linków, z nadaną nazwą odpowiadającą danej kotwicy z linka. Jeżeli więc umieścimy taki "link" u dołu treści strony, a następnie wejdziemy na nią z linka posiadającego odwołanie do tej kotwicy, to pod warunkiem, że strona jest dłuższa niż wysokość okna przeglądarki, treść strony zostanie przewinięta tak, by widoczny był odpowiedni jej fragment (w tym wypadku dół strony).

Jak uzyskać dostęp do hashy w Javascript?

Dość tych pokrętnych opisów. Przejdźmy do meritum sprawy, czyli do obsługi kotwic z poziomu skryptów Javascript. Zacznijmy od tego jak dostać się do hashy, które przechowuje link. Sprawa jak się okazuje, jest bardzo prosta, ponieważ kotwice z linka przechowywane są jako własność obiektu location:
window.location.hash
Czyli np. chcąc wyświetlić dołączone do linka hashe, po prostu, żeby zobaczyć czy to faktycznie działa, możemy własność tę przekazać jako argument do funkcji alert():
alert(window.location.hash);
Jeśli kogoś interesuje jak sprawdzić czy pośród hashy znajduje się jakiś konkretnie nas interesujący, odsyłam do innego artykułu, który pojawił się na łamach tej strony już jakiś czas temu: Javascript - Funkcja Contains(), czyli sprawdzanie czy jeden string zawiera inny.

A jak wymusić przewinięcie strony do danej kotwicy?

Wiemy już jak uzyskać dostęp do przekazanych kotwic, zastanówmy się jednak w jaki sposób możemy w Javascript-cie możemy wymusić na przeglądarce przewinięcie treści do odpowiedniej kotwicy. Na szczęście nie trzeba stosować tutaj żadnych chytrych zabiegów, bo sprawa jest równie prosta jak poprzednio. Tym jednak razem zamiast odczytywać wartość hashy, nadamy ją!
window.location.hash = "#JakasInnaKotwica"; // przewinięcie treści przeglądarki, do kotwicy #JakasInnaKotwica

Jak widać, zagadnienie proste do wykonania i warto mieć tego świadomość.

Komentarze (0) - Nikt jeszcze nie komentował - bądź pierwszy!

Imię:
Treść: