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).