Navigace v rámcích pomocí JavaScriptu

Odkazy v HTML nejsou právě moc chytré. Dokážou vás pouze přenést z jednoho dokumentu do druhého, případně až na určitou pozici určenou pomocí kotvy. V XHTML navíc přicházíte o možnost odkázat do určitého okna (ať už je pojmenované vámi, nebo se systémovým označením). Přitom existuje alespoň jeden případ, kdy potřebujete odkázat z jednoho místa na více cílů. Tím případem jsou rámové struktury <FRAMESET>.

Jak už jsem se zmínil, XHTML nepodporuje u odkazů atribut TARGET. Musíte tedy na rám odkázat prostřednictvím klientského skriptu a objektového modelu dokumentu (DOM). Základním objektem každého dokumentu je window, tento objekt reprezentuje právě aktuální okno (okno prohlížeče, v němž je umístěn dokument). Objekt window obsahuje všechny objekty (metody i proměnné) aktuálního dokumentu.

Objekt window obsahuje i objekty dalších oken. V rámové struktuře se směrem vzhůru odkážeme objektem window.parent (okno.rodič). Pokud máte okna různě vnořovaná, můžete odkaz na rodiče i několikrát opakovat: window.parent.parent. Někdy netušíte, kolik úrovní nad nynějším oknem existuje, ale víte, že se potřebujete dostat do té nejvyšší (až do okna prohlížeče) — tehdy použijete objekt window.top (okno.nejvyšší).

Posledním oknem, které je systémově pojmenované, je okno aktuální — do něj se dostaneme pomocí windows.self (okno.samo). Jelikož window odkazuje na sebe sama, není třeba jej explicitně (výslovně) zapisovat: window.self je totéž, co self (a podobně také window.top = top, window.parent = parent). A aby toho nebylo málo, každé okno obsahuje ještě odkaz na objekt window. Můžete tedy napsat i odkaz vedoucí na self.window (window.self.window, self nebo window), které odkazuje samo na sebe. Točí se vám z toho hlava? Mně se poprvé zatočila.

Důležité je vědět, že top, parent, self a window jsou slova tabu. Nikdy nepojmenovávejte žádné okno nebo jiný objekt v HTML, CSS či javascriptu těmito vyhrazenými slovy.

Cestu nahoru jsme zvládli, ale co když se potřebujete dostat z okna menu do okna obsah? Nejdříve se musíte dostat do okna, které obsahuje jako své potomky (děti nebo vnuky) jak menu, tak i obsah. Pro ilustraci jsem takový jednoduchý příklad nakreslil.

 ====================[x]=
 | menu |    zahlavi    |
 |      |---------------|
 |      |     obsah     |
 |      |               |
 |      |               |
 +----------------------+ 

V rámu menu máte odkaz, který chcete směrovat do rámu obsah. Oba rámy jsou definovány stejným HTML souborem, a proto stačí odkázat se na něj pomocí window.parent (nebo v tomto případě i window.top). Každé pojmenované okno pak můžeme vyvolat jeho jménem. Z rámu menu zavoláme rám obsah pomocí objektu parent.obsah.

HTML vám umožňuje nazývat rámy i nepísmennými znaky, například tečkou nebo pomlčkou, které mají v javascriptu svůj zvláštní význam. Okna, která nejsou pojmenovaná pro javascript bezpečně, můžeme vyvolávat pomocí pole window.frames[]. Na okno obsah se tedy můžeme odvolat i objektem parent.frames["obsah"]. Pole frames[] nám zpřístupní i anonymní okna, a to pomocí jejich indexu (rámy jsou číslovány od nuly). Můžeme tedy napsat i parent.frames[2] namísto parent.obsah.

Když už víme, jak se přepínat mezi okny, musíme se naučit také měnit v nich dokumenty. V každém objektu window je obsažen objekt location.href, který odkazuje na URL dokumentu v okně. Pokud tomuto objektu přiřadíme nový URL, změní se i obsah okna. Odkaz může být uveden i relativním URL. Z rámu menu načteme do rámu obsah titulní stránku Sovy v síti následovně:

Jelikož budeme odkazy používat často, napíšeme si pro ně funkci:

Tuto funkci můžeme vyvolat pomocí odkazu (všiměte si, že uvnitř uvozovek se místo uvozovek píší apostrofy):

V definici funkce jsem nepoužil žádné pojmenované proměnné, což je trochu neobvyklé. K parametrům, s nimiž je funkce volána se dostávám přes pole arguments[]. Tato podivnost mi umožní pracovat s blíže neurčeným počtem rámů. Cyklus for() totiž volá parametry po dvou, dokud ještě nějaké zbývají. Pokud chci změnit dva rámy, mohu prostě jen funkci zavolat ne se dvěma parametry, ale se čtyřmi:

Tímto odkazem tedy změním nejdříve rám parent.frames['obsah'], a potom parent.frames['zahlavi']. Pokud se ptáte, proč funkci volám se slůvkem return, a proč ta funkce končí řádkou return false, musím vás pochválit za bystrý postřeh. Funkce, když se vykoná, vrátí obvykle kladnou hodnotu (true) a ta zůstane jako poslední v událostním ovladači onclick. Skončí-li však onclick jako true, pak se zároveň provede i odskok na odkaz uvedený v atributu HREF, a to my samozřejmě nechceme. Vrácením hodnoty false vyřadíme odkaz HREF z provozu.

Přestože nyní máme napsanou funkci pro javascript, neměli bychom zapomínat na prohlížeče (nebo na vyhledavače), které javascript nepodporují. Hodnotou atributu HREF by proto měl vždy být nějaký vhodný URL. Největší hloupostí, kterou můžete do atributu HREF napsat, je "#". To totiž je, jako byste odkaz vůbec neudělali.

Určitě dříve nebo později narazíte na případ, kdy si nevystačíte s odkazem do parent.frames[] a budete potřebovat funkci jinou. Doufám, že po přečtení dnešního tutorialu už budete vědět, jak si ji sami připravit.

Příští týden se k rámům zase vrátíme.

© 2001, by Martin Kopta, Lupa