[ 23. July 1999]
- Martin_Nemecek
Objekt window a prßca s oknami v JavaScripte
Otvorenie novΘho okna v browsery je jednou z d⌠le₧it²ch funkciφ JavaScriptu. Taktie₧ m⌠₧te v novom okne naloadova¥ nov² dokument, HTML,TXT, alebo
in².
Mßte proste viacero mo₧nostφ ako vyu₧i¥ otvorenie novΘho okna pomocou JavaScriptu.
Na ·vodnom prφklade si ukß₧eme ako m⌠₧me otvori¥ jednoduchΘ okno, nahra¥ do≥ HTML strßnku a nakoniec ho zatvori¥.
Nasleduj·ci script otvorφ novΘ okno browsera a nahrß do≥ nasleduj·cu HTML strßnku:
<html>
<head>
<script language="JavaScript">
<!-- hide
function openWin() {
myWin= open("pokus.html");
}
// -->
</script>
</head>
<body>
<form>
<input type="button" value="Open new window" onClick="openWin()">
</form>
</body>
</html>
Strßnka pokus.html je nahrßvanß v novom okne pomocou met≤dy open() .
NovootvorenΘ okno v predchßdzaj·com prφklade sa niΦφm nelφÜi od okna browsera v ktorom mßte otvoren· naprφklad t·to strßnku.
AvÜak pri deklarovanφ funkcie open() sa m⌠₧ete pohra¥ s parametrami a prisp⌠sobi¥ si pod╛a
potreby novootvorenΘ okno. Naprφklad si m⌠₧ete vybra¥ Φi novootvorenΘ okno browsera bude ma¥ statusbar, toolbar, alebo menubar. Okrem toho
si m⌠₧ete zvoli¥ ve╛kos¥ okna. Nasleduj·ci script otvorφ novΘ okno o ve╛kost 500x350. Okno nebude obsahova¥ statusbar, toolbar ani menubar.
<html>
<head>
<script language="JavaScript">
<!-- hide
function openWin2() {
myWin= open("pokus.htm","displayWindow","width=500,
height=350,status=no,toolbar=no,menubar=no");
}
// -->
</script>
</head>
<body>
<form>
<input type="button" value="Otvor novΘ okno" onClick="openWin2()">
</form>
</body>
</html>
VÜimnite si riadok v ktorom sme definovali premennΘ o ktor²ch sme sa bavili pred t²mto prφkladom a ktorΘ nßm udßvaj· vlastnosti okna:
"width=500,height=350,status=no,toolbar=no,menubar=no"
Nezabudnite, ₧e v predchßdzaj·com riadku medzi jednotliv²mi hodnotami nesm· by¥ medzery!
V nasleduj·cej tabulke s· vlastnosti okna (window), ktorΘ m⌠₧ete vyu₧i¥:
| directories |
yes|no |
| height |
Φφslo v bodoch |
| location |
yes|no |
| menubar |
yes|no |
| resizable |
yes|no |
| scrollbars |
yes|no |
| status |
yes|no |
| toolbar |
yes|no |
| width |
Φφslo v bodoch |
|
NiektorΘ novΘ vlastnosti boli pridanΘ s JavaScriptom vo verzii 1.2 (podporuje napr. Netscape Navigator 4.0 a viac). Nem⌠₧ete
tieto novΘ vlastnosti pou₧i¥ naprφklad v Netscape 2.x, 3.x, alebo v Microsoft Internet Explorer 3.x, preto₧e tieto browsery nevedia interpretova¥
JavaScript 1.2. V nasleduj·cej tabulke sa nachßdzaj·:
| alwaysLowered |
yes|no |
| alwaysRaised |
yes|no |
| dependent |
yes|no |
| hotkeys |
yes|no |
| innerWidth |
Φφslo v bodoch (replaces width) |
| innerHeight |
Φφslo v bodoch (replaces height) |
| outerWidth |
Φφslo v bodoch |
| outerHeight |
Φφslo v bodoch |
| screenX |
pozφcia v bodoch |
| screenY |
pozφcia v bodoch |
| titlebar |
yes|no |
| z-lock |
yes|no |
|
Pomenovanie, oznaΦenie okna
Pri definovanφ novootvorenΘho okna sme pou₧ili nasleduj·ce argumenty:
myWin= open("pokus.htm", "displayWindow",
"width=500,height=350,status=no,toolbar=no,menubar=no");
Ako sa naz²va druh² argument v poradφ : "displayWindow" , a naΦo sl·₧i ?
To je oznaΦenie, alebo nßzov okna, ktor² ho jednoznaΦne identifikuje. Ke∩ poznßme nßzov existuj·ceho okna, m⌠₧eme do≥ nahra¥ www strßnku
pomocou Anchor :
<a href="pokus.html" target="displayWindow">
Tu prßve potrebujeme meno,(oznaΦenie) okna.
Zatvßranie okna, objekt close()
Otvßranie okien pomocou JavaScriptu by sme zvlßdli, ale Φo tak pok·si¥ sa o uzatvorenie okna tie₧ pomocou JavaScriptu. Viem m⌠₧ete namieta¥ ₧e
ste nauΦen² zatvßra¥ oknß klasick²m krφ₧ikom v pravom hornom rohu, a ₧e netreba bßda¥ nad nejak²mi scriptov²mi met≤dami, ale verte, mß to nieΦo do seba.
Na uzatvorenie otvorenΘho okna pou₧ijeme met≤du close() a jednoduch² button pomocou
met≤dy input .
<html>
<script language="JavaScript">
<!-- hide
function closeIt() {
close();
}
// -->
</script>
<center>
<form>
<input type=button value="Zatvor okno" onClick="closeIt()">
</form>
</center>
</html>
Po otvorenφ novΘho okna sa v ≥om objavφ button "Zatvor okno" a po jeho stlaΦenφ sa okno uzavrie. DemonÜtrßcia pou₧itia tohto sp⌠sobu
uzatvßrania okna je vidie¥ hlavne na reklamn²ch pop-up oknßch, ktorΘ sa otvßraj· spolu s naΦφtanφm strßnky.
Otvorenie odkazu v novom okne
V tomto prφklade pou₧ijeme funkciu window.open . Tento prφklad
nßm ukazuje ako pomocou javascriptu presmerova¥ odkaz do ∩alÜieho okna. Zadeklarujeme si na tento ·Φel nov· funkciu makeRemote .
<html>
<head>
<script language="JavaScript">
<!-- hide
function makeRemote() {
remote=window.open("","remotewin","width=500","height=140");
remote.location.href="menu.html";
if (remote.opener==null)
remote.opener=window;
remote.opener.name="opener";
}
// -->
</script>
</head>
<center>
<h1>Otvorenie odkazu v novom okne.</h1>
<a href="javascript:makeRemote()">Odkaz</a>
</center>
</html>
Vysk·Üaj script
|
Homepage
