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ütt 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="pld032.htm" NAME="keret1"> <FRAME SRC="pld033.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="pld035.htm">
<FRAME SRC="pld035.htm">
<FRAME SRC="pld035.htm">
</FRAMESET>
<FRAMESET COLS="50%,*">
<FRAME SRC="pld035.htm">
<FRAME SRC="pld035.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="pld037.htm" NAME="menu"> <FRAMESET COLS="50%,*"> <FRAME SRC="pld038.htm" NAME="dokumentum1"> <FRAME SRC="pld039.htm" NAME="dokumentum2"> </FRAMESET> </FRAMESET> </HTML>
A kód ezt eredményezi. Betölti a pld037.htm (menü) oldalt a felsõ menu nevû keretbe, míg két példa HTML oldalt a dokumentum1 és dokumentum2 keretekbe.
A pld037.htm (menü) 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('pld0310.htm','dokumentum1')">Betölt egy
új dokumentumot az elsõ keretbe</A><BR>
<A HREF="javascript:betolt('pld0310.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('pld0311.htm','pld0311.htm')">Dokumentum
betöltése egyszerre két keretbe</A><BR>
</CENTER>
</BODY>
</HTML>
A pld037.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 (gondolok itt a TARGET attribútumra).