Ablakok

A JavaScript 1997, Juray Tamás

4. fejezet: Ablakok

Ablakok létrehozása

A JavaScript segítségével megnyithatunk új böngészõ ablakokat, amelyekbe betölthetünk új HTML oldalakat, de akár mi magunk is létrehozhatunk dokumentumokat az új ablakban JavaScript segítségével, menet közben. Elõször ismerkedjünk meg azzal, hogy milyen módon nyithatunk meg új ablakot. Az alábbi példa ezt mutatja be:

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- JavaScript kód elrejtése

function ujablak(){
  ablak = open("pelda.htm");
}

// -->
</SCRIPT>
</HEAD>

<BODY>

<FORM>
<INPUT TYPE="button" VALUE="Új ablak nyitása" onClick="ujablak()">
</FORM>

</BODY>
</HTML>

Itt rögtön ki is próbálhatod!

Látható, hogy az ujablak nevû függvényben az open() függvénnyel nyitottuk meg az új böngészõ ablakot, amely megjelenését is szabályozhatjuk JavaScript-en keresztül:

<HTML>
<HEAD>

<SCRIPT LANGUAGE="JavaScript">
<!-- JavaScript kód elrejtése

function ujablak2(){
  ablak = open("pelda.htm", "uj_ablak", 
    "width=300,height=200,status=no,menubar=no");
}

// -->
</SCRIPT>
</HEAD>

<BODY>
<FORM>
<INPUT TYPE="button" VALUE="Módosított ablak nyitása" onClick="ujablak2()">
</FORM>
</BODY>
</HTML>

Látható, hogy a tulajdonságokat egyetlen, szóközöket nem tartalmazó sztringben adtuk meg:

"width=300,height=200,status=no,menubar=no"

Az így létrehozott ablak neve az open() függvény második paramétere. Mi most az uj_ablak nevet adtuk neki, és ezzel hivatkozhatunk rá a késõbbiekben. Például ha új dokumentumot szeretnénk betölteni:

<A HREF="uj_dokumentum.html" TARGET="uj_ablak">

A következõ táblázat összefoglalja azokat a tulajdonságokat, amelyeket egy ablaknál állíthatunk.

Tulajdonság	Beállítható érték	Mit állít?
directories	yes \| no	katalógust eltûnteti ill. megjeleníti
height	a képpontok száma	az ablak magassága
location	yes \| no	a címsort eltûnteti ill. megjeleníti
menubar	yes \| no	eltûnteti ill. megjeleníti a menüsort
resizable	yes \| no	átméretezhetõ legyen-e az ablak
scrollbars	yes \| no	a gördítõsávokat eltûnteti ill. megjeleníti
status	yes \| no	a státuszsort eltûnteti ill. megjeleníti
toolbar	yes \| no	eltûnteti ill. megjeleníti az eszközsort
width	a képpontok száma	az ablak szélessége

Néhány további tulajdonságot tartalmaz a JavaScript 1.2-es változata, amelyet viszont csak a Netscape 4.0-ás változata, ill. az Internet Explorer 4.0-ás változata képes kezelni. Ezek a következõk:

Tulajdonság	Beállítható érték	Mit állít?
alwaysLowered	yes \| no	Az új ablak mindig a többi alatt helyezkedik el, ha értéke "yes"
alwaysRaised	yes \| no	Az új ablak mindig a többi felett látszik, ha értéke "yes"
dependent	yes \| no	Az új ablak a jelenlegi gyermekeként jön létre
hotkeys	yes \| no	Ki- bekapcsolja a gyorsító billentyûk használatának lehetõségét
innerWidth	a képpontok száma	A régi width tulajdonságot váltja fel
innerHeight	a képpontok száma	A régi height tulajdonságot váltja fel
outerWidth	a képpontok száma	Az ablak külsõ határának szélességét határozza meg
outerHeight	a képpontok száma	Az ablak külsõ határának magasságát határozza meg
screenX	elhelyezkedés képpontokban mérve	Az ablak bal felsô sarkának X koordinátája
screenY	elhelyezkedés képpontokban mérve	Az ablak bal felsô sarkának Y koordinátája
titlebar	yes \| no	Megjeleníti a címsort
z-lock	yes \| no	Ha értéke "yes", akkor egy olyan ablakot kapunk, amely nem emelkedik a többi fölé, ha õ lesz az aktiv ablak

Fontos tudni, hogy nem minden beállítás próbálható ki közvetlenül, ugyanis az 1.2-es tulajdonságok nagy része csak az ún. megjelölt, hitelesített JavaScript kódokban mûködnek.

A következõ ûrlap segítségével minden beállítási mód kipróbálható, amelyet az 1.0-as JavaScript támogat. Csak állítsuk be a megfelelõ tulajdonságokat, majd a gombra kattintva megjelenik az új ablak.

Ablakok bezárása

JavaScript segítségével be is zárhatjuk az ablakunkat. Ehhez a close() függvényt kell használnunk.

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- JavaScript kód elrejtése

function bezar(){
  close();
}

// -->
</SCRIPT>
</HEAD>
<BODY>

<FORM>
<CENTER>
<INPUT TYPE="button" VALUE="Zárj be!" onClick="bezar()">
</CENTER>
</FORM>

</BODY>
</HTML>

Töltsük be ezt a példát egy ablakba az elõbb tanult módon! Dokumentumok készítése JavaScriptbôl

Ez egy nagyszerû lehetõség JavaScript-ben. Nem egy elõre elkészült HTML oldalt töltünk be egy ablakba vagy keretbe, hanem menet közben készítjük azt el, így megoldható, hogy napról-napra változó, környezettõl függõ oldalakat hozzunk létre.

<HTML>
<HEAD>

<SCRIPT LANGUAGE="JavaScript">
<!-- A JavaScript kód elrejtése

function ujablak3(){
  ujablak = open("","uj_ablak3",
    "width=400,height=300,status=yes,toolbar=yes,menubar=yes");

  ujablak.document.open();

  ujablak.document.write("<HTML><HEAD><TITLE>Dokumentum készítése JavaScript-tel");
  ujablak.document.write("</TITLE></HEAD>");
  ujablak.document.write("<BODY><CENTER><H1>");
  ujablak.document.write("Ezt az oldalt teljesen a JavaScript ");
  ujablak.document.write("hozta létre!");
  ujablak.document.write("</H1></CENTER></BODY>");
  ujablak.document.write("</HTML>");

  ujablak.document.close();
}

// -->
</SCRIPT>
</HEAD>
<BODY>

<CENTER>
<FORM>
<INPUT TYPE="button" VALUE="Dokumentum készítése JavaScript-tel" onClick="ujablak3()">
</FORM>
</CENTER>

</BODY>
</HTML>

Elõször nézzük meg az ujablak3() nevû függvényt. Megnyitottunk egy új böngészõ ablakot a már megismert open() függvénnyel. Azonban vegyük észre, hogy az elsõ paraméternek nem adtunk értéket (""), ez azt jelenti, hogy nem kívánunk betölteni HTML oldalt, hanem azt JavaScript-el akarjuk létrehozni. Az ujablak nevû változóval, amit most definiáltunk, hozzáférhetünk a megnyitott ablakunkhoz (fontos megjegyezni azt, hogy ennél a feladatnál nem használható az ablaknak adott uj_ablak3 név). Az ablak megnyitása után meg kell nyitnunk a dokumentumot. Ezt az alábbi sor csinálja:

ujablak.document.open();

zaz meghívtuk a document objektum open() metódusát. Ezt ne keverjük össze a window objektum open() függvényével! Az ujablak változót ki kell tenni a document.open() elé, mert csak így érhetjük el az ablakunkat. A függvényben a következõ sorok hozzák létre a tényleges oldalt:

ujablak.document.write("<HTML><HEAD><TITLE>Dokumentum készítése JavaScript-tel");
ujablak.document.write("</TITLE></HEAD>");
ujablak.document.write("<BODY><CENTER><H1>");
ujablak.document.write("Ezt az oldalt teljesen a JavaScript ");
ujablak.document.write("hozta létre!");
ujablak.document.write("</H1></CENTER></BODY>");
ujablak.document.write("</HTML>");

Amint az látható, egyszerû HTML elemeket írtunk a dokumentumunkba a document.write() függvény segítségével. Ide természetesen bármilyen más HTML elem írható. Miután ilyen módon megírtuk a dokumentumunkat, le is kell zárni azt:

ujablak.document.close();

A példa azt mutatta be, hogy milyen módon lehet dokumentumot létrehozni új ablakba JavaScript segítségével. Új ablak helyett választhatunk tetszõleges keretet is. Tegyük fel, hogy már rendelkezünk keret1 és keret2 nevû keretekkel, és dokumentumot akarunk létrehozni a keret2-be! Ezt megtehetjük a következõ módon:

parent.keret2.document.open();   // a dokumentum megnyitása a keret2-ben

parent.keret2.document.write(" ... Ide kerül a HTML kód ... ");

parent.keret2.document.close();  // a dokumentum bezárása a keret2-ben

[ Fõoldal ] [ Tartalomjegyzék ] [ 3. fejezet ]

directories	yes	no
height
location	yes	no
menubar	yes	no
resizable	yes	no
scrollbars	yes	no
status	yes	no
toolbar	yes	no
width