A JavaScript
 
3. fejezet:  Keretek

Keretek létrehozása HTML dokumentumban

Egyre gyakrabban találkozni olyan oldalakkal, amelyek kereteket tartalmaznak. A Netscape a 2.0-ás, az Internet Explorer a 3.0-ás változatától tudja kezelni a kereteket. A keretek felosztják a böngészõ ablakát, és mindegyik rendelkezik az alábbi alapvetõ tulajdonsággokkal:

A JavaScript is hatékonyan együt tud mûködni a keretekkel. De mielõtt ebbe belemélyednénk, építsünk fel egy kereteket tartalmazó HTML oldalt! 

<HTML>
<FRAMESET ROWS="50%,*">
  <FRAME SRC="oldal1.htm" NAME="keret1">
  <FRAME SRC="oldal2.htm" NAME="keret2">
</FRAMESET>
</HTML>

Ez a kód két keretet eredményez az oldalon (ezzel a linkkel, rögtön ki is próbálhatod). Kereteket a <FRAMESET> HTML elemmel készíthetünk, amelyen belül jelen esetben a ROWS attribútumot használtuk. Ez azt jelenti, hogy a kereteink sorokban fognak elhelyezkedni, a ROWS attribútumot követõ százalékos arányoknak megfelelõen. Itt most " 50%,* " szerepel, azaz az elsõ keret a böngészõ ablakának felét fogja elfoglalni, míg a másik keret a fennmaradó részt (ezt jelenti ugyanis a *). Ha nem százalékosan, hanem pixelekben szeretnénk megadni a keretek méretét, akkor ezt is megtehetjük a százalékjel elhagyásával.
 

Sorok helyett oszlopokba is rendezhetjük a kereteket, ekkor a ROWS attribútum helyett COLS attribútumot használjunk. A kettõt természetesen kombinálhatjuk is: 

<HTML>

<FRAMESET ROWS="50%,*">

  <FRAMESET COLS="33%,33%,*">

    <FRAME SRC="pelda.htm">

    <FRAME SRC="pelda.htm">

    <FRAME SRC="pelda.htm">

  </FRAMESET>

  <FRAMESET COLS="50%,*">

    <FRAME SRC="pelda.htm">

    <FRAME SRC="pelda.htm">

  </FRAMESET>

</FRAMESET>

</HTML>

Ennek a kódnak az eredményét itt láthatod!

Keretek kezelése JavaScript-ben

Térjünk vissza az elsõ példára, amelyben két keretet hoztunk létre. Hogyan jelenik meg ez a JavaScript szemszögébõl? Mint mindent, a JavaScript a kereteket is egy logikus hierarchiába rendezi. A hierarchia legtetején maga a böngészõ ablaka van. Ezt az ablakot bontottuk fel két keretre. Az ablak a két keret szülõje, míg a keretek a gyermekek. Így az ablakra parent néven, míg a keretekre azon a néven hivatkozhatunk, amit a <FRAME> HTML elem NAME attribútumában megadtunk (a példánkban ez keret1 és keret2). A JavaScript lehetõvé teszi, hogy:

Az elsõ eset azt jelenti, hogy a szülõ ablakhoz tartozó HTML kódban (gyakorlatilag ez hozza létre a kereteket) van egy JavaScript kódunk, amely a keretekben szeretne bizonyos mûveleteket elvégezni, például megjeleníteni valamit. Ekkor egyszerûen a keret nevének felhasználásával férhetünk hozzá a kerethez. Pl.: 

keret2.document.write("Ezt a sort a szülô ablak írta ki!");

A második esetre akkor lehet szükség, ha el akarjuk távolítani a kereteket az ablakból. Ez úgy történik, hogy a kereteket létrehozó dokumentum helyére (amely éppen a szülô ablakhoz tartozó dokumentum) újat töltünk be. A szülô ablakhoz parent névvel férhetünk hozzá egy gyerek ablakból (keretbôl). Új dokumentum betöltéséhez nem kell mást tennünk, mint hogy a szülô ablak location.href (amelyrôl a második fejezet végén volt szó) mezôjéhez új értéket rendelünk.Ezt a következô utasítással tehetjük meg: 

parent.location.href = "http://...";

A harmadik eset a leggyakoribb, hiszen legtöbbször azt akarjuk, hogy a keretek együttmûködjenek. Tegyük fel, hogy a feladatunk az, hogy írassunk ki JavaScript segítségével egy szöveget az elsô kerethez tartozó dokumentumból a második keretbe. Az egyes keretek között nincs kapcsolat, amely azt jelenti, hogy az egyik keretbôl nem hívhatjuk közvetlenül a másikat, hanem mivel a többi keretet csak a szülô látja, így azon keresztül hivatkozhatunk rájuk: 

parent.keret2.document.write("Ezt az elsô keretbôl írattuk ki");

Végezetül nézzünk meg egy nagyobb lélegzetû példát!

A kereteket létrehozó dokumentum legyen a következõ! 

<HTML>
<FRAMESET ROWS="50%,*">
  <FRAME SRC="menu.htm" NAME="menu">
  <FRAMESET COLS="50%,*">
    <FRAME SRC="dok1.htm" NAME="dokumentum1">
    <FRAME SRC="dok2.htm" NAME="dokumentum2">
  </FRAMESET>
</FRAMESET>
</HTML>

A kód ezt eredményezi. Betölti a menu.htm oldalt a felsõ menu nevû keretbe, míg két példa HTML oldalt a dokumentum1 és dokumentum2 keretekbe.

A menu.htm kódja: 

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Elrejtés

function betolt(url, keret){
  if (keret == "dokumentum1") parent.dokumentum1.location.href=url;
  else parent.dokumentum2.location.href=url;
}

function betolt2(elso_url, masodik_url){
  betolt(elso_url, 'dokumentum1');
  betolt(masodik_url, 'dokumentum2');
}

function szincsere(ujszin, keret){
  if (keret == "dokumentum1") parent.dokumentum1.document.bgColor=ujszin;
  else parent.dokumentum2.document.bgColor=ujszin;
}
// -->
</SCRIPT>
</HEAD>

<BODY>

<CENTER>
<H1>Menü</H1>
<A HREF="javascript:betolt('uj.htm','dokumentum1')">
  Betölt egy új dokumentumot az elsô keretbe</A><BR>
<A HREF="javascript:betolt('uj.htm','dokumentum2')">
  Betölt egy új dokumentumot a második keretbe</A><BR>
<A HREF="javascript:szincsere('#00FFFF','dokumentum1')">
  Háttérszín cseréje az elsô keretben</A><BR>
<A HREF="javascript:szincsere('#FFFF00','dokumentum2')">
  Háttérszín cseréje a második keretben</A><BR>
<A HREF="javascript:betolt2('kettot.htm','kettot.htm')">
  Dokumentum betöltése egyszerre két keretbe</A><BR>
</CENTER>

</BODY>
</HTML>

A menu.htm tartalmaz három függvényt. Mindet a HREF attribútumból hívtuk meg, azaz ekkor a linkre kattintva a függvény hívódik meg, és nem új dokumentum töltõdik be. A betolt függvény két paramétert vár, egy új HTML dokumentum címét, és annak a keretnek nevét (dokumentum1 vagy dokumentum2), ahová be kell tölteni az új dokumentumot. Ezt úgy érjük el, hogy a választott keret location objektumának href mezõjét felülírjuk az új címmel. Feltételes elágazást (if - else) használunk a keret kiválasztására, azaz ha a keret paraméter a dokumentum1 értéket kapja, akkor a parent.dokumentum1.location.href a hivatkozás, ellenkezõ esetben parent.dokumentum2.location.href. Akinek ez még nem lenne ismerõs, az ne ijedjen meg. A késõbbiekben errõl részletesen szó lesz!

A szincsere függvény felépítése nagyon hasonló, csak itt az új szín értékét ill. a keret nevét adjuk át, és természetesen a document objektum bgColor értékének adunk új értéket.

A betolt2 függvény egyszerre két keretbe tölt be új HTML oldalt. Ezt úgy értük el, hogy a függvény törzsében meghívtuk a betolt függvényt elõbb az elsõ keret nevével (dokumentum1) ill. a megfelelõ címmel, majd meghívtuk újra, csak most a második keret nevével (dokumentum2).  Maga a betolt2 függvény önmagában viszont csak két paramétert vár, az elsõ keretbe betöltendõ ill. a második keretbe betöltendõ oldalak címét, amelyeket a betolt függvénynek adunk át.

A példa alapján látható, hogy JavaScript segítségével sokkal összetettebb feladatok is megoldhatók kereteket tartalmazó oldalakon, mint ha csak a HTML-ben meglévõ lehetõségeket használhatjuk (godolok itt a TARGET attribútumra).
 

[ 4. fejezet ][ Tartalomjegyzék ] [ 2. fejezet ]