JavaScript - Dynamická okna
Dynamicky vytvořené okno je okno, které bude vytvořeno skriptem (návštěvníkem).
Vytvoření dynamického okna
Samotný skript: >
function okno(){ obsah = window.prompt("Text, který chcete mít v novém okně","text"); dyn_okno = window.open("","dyn_okno","height=100px, width=100px, top=0, left=100px, resizable=no, status=no, toolbar=no,location=no, scrollbars=yes, resizable=yes"); dyn_okno.document.write("<html><body>"); dyn_okno.document.write(obsah); dyn_okno.document.write("</body></html>"); }
Spouštěcí tlačítko:
<input onclick="okno();" value="otevři okno" type="button">
Obsah okna bude obsah
, který je zaveden metodou window.prompt(). Proměnná dyn_okno
je otevírané okno. Nakonec určíme obsah okna - dyn_okno.document.write();
zapisuje text do okna.
V novém okně jsme vypsali počátek struktury HTML, poté hodnotu proměnné obsah
a nakonec vše ukončili </body></html>
. Když otevíráme dynamicky vytvořené okno, nezapisujeme URL (vytváříme novou stránku skriptem).
Ukázka:
Manipulace s okny
S okny můžeme manipulovat po jejich otevření. Slouží k tomu tyto metody:
Metoda | Popis |
---|---|
close() | zavře okno |
blur() | nastavení okna na pozadí |
focus() | nastavení okna do popředí |
moveTo(x,y) | posun na souřadnice x,y |
moveBy(x,y) | posun o x pixelů horizontálně a y pixelů vertikálně |
resizeTo(x,y) | změna velikosti na x a y |
resizeBy(x,y) | změna velikosti o x a o y |
scrollTo(x,y) | rolování okna na souřadnice x,y |
scrollBy(x,y) | rolování okna o x a o y |
Tento skript otevře okno, které budeme tlačítky zvětšovat a posunovat.
function okno2(){ obsah = window.prompt("Text, který chcete mít v novém okně","text"); dyn_okno = window.open("","dyn_okno", "height=100px, width=100px, top=0, left=100px, resizable=no, status=no, toolbar=no,location=no, scrollbars=yes, resizable=yes"); dyn_okno.document.write("<html><body>"); dyn_okno.document.write(obsah); dyn_okno.document.write("<input type='button' onClick='resizeBy(10,10);' value='otevři okno' id='em'>"); dyn_okno.document.write("<input type='button' onClick='moveBy(10,10);' value='otevři okno' id='em'>"); dyn_okno.document.write("</body></html>"); }
Ukázka:
Další: Datum a čas
Vyhledávání
Základy
Zajímavosti
DOM
Poradna
Pokud si nevíte rady, chcete kontakt na spolehlivého tvůrce webu, či vás zajímá cizí názor, ozvěte se.