Leírások+Referenciák / JavaScript / IV. 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("pld041.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("pld041.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?
directoriesyes | no katalógust megjeleníti ill. eltûnteti
heighta képpontok száma az ablak magassága
locationyes | no a címsort megjeleníti ill. eltûnteti
menubaryes | no megjeleníti ill. eltûnteti a menüsort
resizableyes | no átméretezhetõ legyen-e az ablak
scrollbarsyes | no a gördítõsávokat megjeleníti ill. eltûnteti
statusyes | no a státuszsort megjeleníti ill. eltûnteti
toolbaryes | no megjeleníti ill. eltûnteti az eszközsort
widtha 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?
alwaysLoweredyes | no Az új ablak mindig a többi alatt helyezkedik el, ha értéke "yes"
alwaysRaisedyes | no Az új ablak mindig a többi felett látszik, ha értéke "yes"
dependentyes | no Az új ablak a jelenlegi gyermekeként jön létre
hotkeysyes | no Ki- bekapcsolja a gyorsító billentyûk használatának lehetõségét
innerWidtha képpontok száma A régi width tulajdonságot váltja fel
innerHeighta képpontok száma A régi height tulajdonságot váltja fel
outerWidtha képpontok száma Az ablak külsõ határának szélességét határozza meg
outerHeighta képpontok száma Az ablak külsõ határának magasságát határozza meg
screenXelhelyezkedés képpontokban mérve Az ablak bal felsõ sarkának X koordinátája
screenYelhelyezkedés képpontokban mérve Az ablak bal felsõ sarkának Y koordinátája
titlebaryes | no Megjeleníti a címsort
z-lockyes | 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-ás JavaScript támogat. Csak állítsuk be a megfelelõ tulajdonságokat, majd a gombra kattintva megjelenik az új ablak.

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

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 ");
  ujablak.document.write("készítése JavaScript-tel</TITLE>");
  ujablak.document.write("</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();

Azaz 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 ");
ujablak.document.write("készítése JavaScript-tel</TITLE>");
ujablak.document.write("</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

<< Vissza a tartalomhoz

Tovább az ötödik fejezethez >>