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? |
| directories | yes | no | katalógust megjeleníti ill. eltûnteti |
| height | a képpontok száma | az ablak magassága |
| location | yes | no | a címsort megjeleníti ill. eltûnteti |
| menubar | yes | no | megjeleníti ill. eltûnteti a menüsort |
| resizable | yes | no | átméretezhetõ legyen-e az ablak |
| scrollbars | yes | no | a gördítõsávokat megjeleníti ill. eltûnteti |
| status | yes | no | a státuszsort megjeleníti ill. eltûnteti |
| toolbar | yes | no | megjeleníti ill. eltûnteti 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-ás JavaScript támogat. Csak állítsuk be a megfelelõ tulajdonságokat, majd a gombra kattintva megjelenik az új ablak.
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