[ 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
|