Reklama

JavaScript a okná

HTML je jazyk značkovací (HyperText Markup Language), teda nie programovací, ako ho za to považuje veľké množstvo začínajúcich webdesignérov… Jazyk HTML nám neponúka veľa možností manipulácie s oknami. Ak teda chceme s oknami pracovať naozaj profesionálne, musíme siahnúť na programovací jazyk, ktorým je JavaScript. JavaScript nám ponúka veľké množstvo možností, ako pracovať s oknami.

window.open();

Volaním tejto konštrukcie nám JavaScript otvorí nové okno. všeobecný tvar zápisu je nasledovný:

window.open("url","nazov_okna","vlastnosti");

url – adresa stránky, ktorá sa má nahrať do nového okna. Ak necháme uvodzovky prázne JavaScript nám vytvorí nové prázdne okno.
nazov_okna – všeobevný názov novootvoreného okna
vlastvosti – definujú vzhľad otvoreného alebo generovaného okna. vlastnosti sa oddeľujú čiarkou, a všetky sú vypísané v tabuľke nižšie.

Vlastnosť	Hodnota	Výsledok
toolbar	yes/no	zobrazí/nezobrazí lištu s ikonami (toolbar)
menubar	yes/no	zobrazí/nezobrazí hlavné menu prehliadača
scrollbars	yes/no	zobrazí/nezobrazí posuvníky
location	yes/no	zobrazí/nezobrazí riadok s adresou stránky
directories	yes/no	zobrazí/nezobrazí políčka s vybranými adresami
resizable	yes/no	povoliť/nepovoliť možnosť meniť veľkosť okna
status	yes/no	zobrazí/nezobrazí stausový riadok
copyhistory	yes/no	preniesť/nepreniesť históriu navštívených stránok
top	číslo	x-ová súradnica okna
left	číslo	y-ová súradnica okna
width	číslo	šírka okna
height	číslo	výška okna

A teraz si to ukážeme na príklade:

<html>
<head>
<script language="JavaScript" type="text/javascript">

function otvor_okno()
{
   window.open("http://www.google.sk/","okno_1","menubar=no,scrollbars=
   no,"+
   "directories=no,location=no,toolbar=no,"+
   "resizable=yes,width=500,height=300,top=50,left=100");
}

</script>
</head>
<body>
<p onClick="otvor_okno();">Otvoriť nove okno</p>
</body>
</html>

A tu môžete vidieť náš príklad v akcii. Kliknite na nasledujúci odstavec…

Otvoriť nové okno

Tento náš script otvoril už existujúcu stránku. Teraz si ukážeme ako môžeme novú stránku dynamicky generovať. Syntax bude rovnaká ako pri prvom príklade, len s tým rozdielom, že namiesto URL adresy necháme uvodzovky prázdne. Do funkcie však budeme ďalej vpisovať HTML kód novovygenerovanej stránky. Pri písaní tohoto kódu je dôležité, že konštrukciu window.open() si potrebujeme priradiť do premennej. Ak robíte podľa tohoto tutoriálu tak my sme si zvolili premennú pre novú stránku gen_okno. vpisovanie kódu sa uskutočňuje javascriptovou konštrukciou document.write(). Tento výraz v kóde novej stránky \n znamená presun do nového riadku v kóde. Neznamená to to isté čo <br>! Podme na to…

<html>
<head>
<script language="JavaScript" type="text/javascript">

function otvor_okno()
{
   gen_okno = window.open("","okno_1","menubar=no,scrollbars=
   no,"+
   "directories=no,location=no,toolbar=no,"+
   "resizable=yes,width=500,height=300,top=50,left=100");

   gen_okno.document.write("<html>\n<body bgcolor='#FF7700'>\n");
   gen_okno.document.write("<h1>Dobrý deň!</h1>\n");
   gen_okno.document.write("<font color='Navy'>Práve sa pozeráte ");
   gen_okno.document.write("na dynamicky vygenerovanú stránku.</font>
   \n");
   gen_okno.document.write("</body>\n</html>");
}

</script>
</head>
<body>
<a href="javascript:otvor_okno();">Otvoriť nové okno</a>
</body>
</html>

Na pochopenie \n. Ak by v kóde generovanej stránky \n neobsahoval, bol by kód stránky v jenom riadku. \n nám presunie ostatné tagy do nového riadku. Pre pochopenie viď zdrojový kód tohto príkladu.

Manipulácie s oknami

Takže otvárať nové okná a generovať nové stránky sme sa už naučili. Ale JavaScript nám neponúka len tieto dve veci. My môžeme s týmito oknami aj manipulovať. manipulácia JavaScriptových okien sa robí pomocou týchto funkcií:

Funkcia	činnosť funkcie
close()	zavretie okna
blur()	presunutie okna do pozadia
focus()	presunutie okna do popredia
resizeTo(x,y)	zmena rozmerov okna na x*y pixelov
resizeBy(x,y)	zmena rozmerov okna o x-pixelov doprava/doľava a y-pixelov dole/hore
moveTo(x,y)	presun okna na súradnice x,y
moveBy(x,y)	presun okna o x-pixelov doprava/doľava a y-pixelov dole/hore
scrollTo(x,y)	rolovanie textu v okne na súradnice x,y
scrollBy(x,y)	rolovanie textu v okne o x-pixelov doprava/doľava a y-pixelov dole/hore

Teraz modifukujeme už napísaný script s generovaním nového okna tak, aby sme mali možnosť zavrieť okno alebo ho presunúť na súradnice X=300 a Y=250…

<html>
<head>
<script language="JavaScript" type="text/javascript">

function otvor_okno()
{
   gen_okno = window.open("","okno_1","menubar=no,scrollbars=no,"+
   "directories=no,location=no,toolbar=no,"+
   "resizable=yes,width=500,height=300,top=50,left=100");

   gen_okno.document.write("<html>\n<body bgcolor='#DDCC00'>\n");
   gen_okno.document.write("<h1>Dobrý deň!</h1>\n");
   gen_okno.document.write("<font color='Navy'>Práve sa pozeráte ");
   gen_okno.document.write("na dynamicky vygenerovanú stránku,</font>
   \n");
   gen_okno.document.write("<a href='javascript:window.close();'>
   ktorú môžeme aj zavrieť</a> alebo \n");
   gen_okno.document.write("<a
   href='javascript:window.moveTo(300,250);'>presunúť na súradnice
   [300,250]</a>\n");
   gen_okno.document.write("</body>\n</html>");
}

</script>
</head>
<body>
<a href="javascript:otvor_okno();">Otvoriť nové okno</a>
<a href="javascript:gen_okno.blur();">Presunúť okno do pozadia</a><br>
<a href="javascript:gen_okno.focus();">Presunúť okno do popredia</a><br>
</body>
</html>

Príklad nájdete tu.
Pri všetkých funkciách, ktoré manipulujú s oknami platí, že sa viažu na špecifikované okno. Teda ak chceme manipulovať s aktuálnym oknom použijeme konštrukciu window.funkcia() napr: window.moveTo(20,50). Ale ak chceme manipulovať s iným otvoreným oknom miesto window zadame nazov premennej, ktorá poukazuje na príslušné okno (v našom prípade sme použili: gen_okno.blur();).

Dúfam, že Vám tento tutoriál pre prácu s oknami na niečo užitočné poslúži a že Vás niečo nové naučil. S pozdravom… Atlox GOOD LUCK

Hodnocení tutoriálu: 1.4 (hodnotilo 63 uživatelů)