Uusien ikkunoiden avaaminen

JavaScriptin window-olion open-metodilla voidaan avata uusia ikkunoita, sekä hallita näiden ominaisuuksia.

Sisällysluettelo

Syntaksi
- Parametrien kuvaus
- Parametrien ilmoitustapa
Linkki yksittäiseen uuteen ikkunaan
- (X)HTML Strict -yhteensopiva linkki
- (X)HTML Transitional -yhteensopiva linkki
Linkit useampaan uuteen ikkunaan
Ikkunan kahva
Lisäesimerkkejä

Syntaksi

window.open('OSOITE','NIMI','OMINAISUUDET');

Parametrien kuvaus

OSOITE - URL-osoitteesta koostuva merkkijono, esim. absoluuttisesti http://weppipakki.com/, tai suhteellisesti example.htm.
NIMI - Aakkosnumeerisista merkeistä (myös alaviiva käy) koostuva ikkunan nimi, esim. infoAkkuna. Ikkunan nimeä voidaan käyttää linkkien kohteena.
OMINAISUUDET - Valinnainen ikkunan ominaisuusluettelosta koostuva merkkijono. Ominaisuudet arvoineen erotetaan toisistaan pilkulla (ilman välilyöntiä). Mikäli kaikki ominaisuudet jätetään ilmoittamatta ikkuna aukeaa oletusominaisuuksilla varustettuna (kaikki ominaisuudet päällä), kuten Tiedosto-valikosta avattu ikkuna. Mikäli taas yksi tai useampi ominaisuus ilmoitetaan, niin ilmoittamatta jätetyt ominaisuudet ovat pois päältä.

Parametrien ilmoitustapa

Useammat ikkunan ominaisuusilmoitukset ovat on/off -asetuksia, jotka voidaan määritellä muutamalla eri tavalla. Seuraavassa esimerkissä kolme eri tapaa ilmoittaa samat ominaisuudet:

window.open('esim.htm','Esimerkki','resizable');
window.open('esim.htm','Esimerkki','resizable=1');
window.open('esim.htm','Esimerkki','resizable=yes');
// varmista aina, että ikkunan koko on muunneltavissa!

Yo. esimerkin mukaisesti kaikki muut Boolean-asetukset saisivat negatiivisen arvon (0, no).

Muut kuin on/off -asetukset saavat arvokseen kuvapisteitä merkitsevän luvun. Ikkunansäätäjäsivulla näet yleisimmät käytettävät ominaisuudet ja voit käytännössä kokeilla uuden ikkunan eri ominaisuuksien vaikutusta.

Linkki yksittäiseen uuteen ikkunaan

Uuteen ikkunaan linkittäessä on varmistettava, ettei JS sotke linkin normaalia toimivuutta tilanteissa joissa JS-tukea ei ole käytössä. Seuraa kaksi esimerkkiä, joissa navigoinnin toimivuus on varmistettu:

(X)HTML Strict -yhteensopiva linkki

Seuraava esimerkki on, sekä turvallinen, että (X)HTML Strict -yhteensopiva tapa linkittää yksittäiseen uuteen ikkunaan:

<a
 href="../code/js2/huom3a.htm"
 onclick="this.target='Testi';
 window.open('','Testi','resizable=1,width=300,height=300');
 return true;">turvallinen linkki uuteen ikkunaan</a>

Yo. koodi tulostuu dokumenttiin seuraavasti: turvallinen linkki uuteen ikkunaan. Ilman JS-tukea linkki aukeaa samaan ikkunaan.

(X)HTML Transitional -yhteensopiva linkki

Tämäkin (X)HTML Transitional -yhteensopiva versio on turvallinen:

<a
 href="../code/js2/huom3a.htm"
 target="Testi2"
 onclick="window.open('','Testi2','resizable=1,width=300,height=300');
 return true;">myös turvallinen linkki uuteen ikkunaan</a>

Yo. koodi tulostuu dokumenttiin seuraavasti: myös turvallinen linkki uuteen ikkunaan. Ilman JS-tukea linkki aukeaa uuteen ikkunaan.

Huomaa seuraavat seikat yo. esimerkeissä:

Kummatkin linkit avaavat erillisen ikkunan, koska ikkunoiden nimi on eri (Testi ja Testi2). Linkit siis avautuisivat samaan ikkunaan, mikäli niiden kohde (target, joka esiintyy esimerkeissä aina kahdesti) olisi sama.
Selain itse päättää uuden ikkunan sijainnin, koska koodissa sitä ei ole määritetty. Käytännössä tämä tietää erilaisia tuloksia eri käyttäjille.
Boolean-asetuksista vain resizable on päällä, koska kun yksi tai useampi ominaisuus ilmoitetaan, niin ilmoittamatta jätetyt ominaisuudet ovat pois päältä.
ONCLICK-attribuuttien arvo, eli se varsinainen JS-koodi on katkaistu puolipisteen jälkeen esityksellisistä syistä. Tämä käytäntö on sallittua, mutta koodi ei kestä rivinvaihtoa missään muualla.

Linkit useampaan uuteen ikkunaan

Uuden ikkunan avaamistoimenpiteestä kannattaa tehdä tarvittaessa kutsuttava aliohjelma, eli funktio, mikäli sivustossa avattavia ikkunoita on useampia ja niiden ominaisuudet ovat yhtenäisiä. Funktio kannattaa aina sijoittaa ulkoiseen JS-tiedostoon, jos useat sivut kutsuvat sitä. Yksinkertaisuuden vuoksi esimerkissä sijoitamme funktion SCRIPT-elementtiin (HEAD-elementin lapseksi), jolloin sitä voidaan kutsua vain samasta dokumentista:

<script type="text/javascript">
//<![CDATA[

var vakio; /* esitellään muuttuja funktion ulkopuolella,
              jotta siihen voitaisiin viitata globaalisesti */ 
           
function vakioAkkuna() {
 /* tehdään vakio-muuttujasta window-olio ja sijoitetaan
    siihen open-metodi toivotuilla ominaisuuksilla varustettuna: */
	
 vakio = window.open('','senNimi','resizable=1,width=300,height=300');
	
 vakio.focus(); //pyydetään lopuksi ikkunnalle kohdistus
               //window-olion focus-metodilla
}
//]]>
</script>

Sitten kutsutaan funktiota aina tarvittaessa:

<a
 href="../code/js2/huom3a.htm"
 onclick="this.target='senNimi';vakioAkkuna();">
 aina samat ominaisuudet</a>

Esimerkkilinkkimme tulostuu seuraavasti: aina samat ominaisuudet. Huomioi, että kohteeksi asetetaan funktiossa määritetty ikkunan nimi. Mikäli funktiota kutsuttaisiin eri linkistä ikkunan ollessa avoinna, niin sen sisältö vaihtuisi ja se saisi kohdistuksen.

Ikkunan kahva

Edellisessä esimerkissä tehtiin ikkunalle "kahva", eli sijoitettiin open-metodi vakio nimisen muuttujan arvoksi. Kahvalla viittasimme kyseiseen ikkunaan ja pyydettiin sille kohdistus focus-metodilla. Kahvan avulla voimme siis kysellä ja muutella ikkunan ominaisuuksia, tai suorittaa window-olion metodeja, kuten ikkunan sulkeminen. Seuraavassa käsittelemme muutamaa esimerkkiä ikkunan kahvan käytöstä.

Uuden ikkunan sulkeminen

JS:n avulla ikkunat suljetaan close-metodilla. Tässä suljemme uuden ikkunan avaavasta scriptistä käsin. Ikkunan sulkemista avatusta ikkunasta käsin käsitellään eri paikassa. Käytämme edellisen esimerkin kahvaa viittaamaan suljettavaan ikkunaan:

<a href="javascript:if(vakio==undefined||vakio.closed){
alert('Ehkä et avannut vakio-ikkunaa, tai suljit sen jo aikaisemmin?')}
else {vakio.close()}">sulje vakio.</a>

Yo. esimerkissä ennen close-metodin suoritusta tarkastetaan onko ikkuna avattuna tai suljettuna. Mikäli vakio-muuttujan arvo on määrittelemätön (undefined) ikkunaa ei olla vielä avattu. window.closed -ominaisuudella taas (joka palauttaa Boolean-arvon true/false) voimme tarkastaa onko ikkuna suljettuna. Mikäli toinen ehdoista täyttyy niin suoritetaan vain alert-metodi. Muussa tapauksessa ikkuna on auki ja suoritetaan vain close-metodi.

Esimerkkilinkkimme tulostuu seuraavasti: sulje vakio. Kokeile linkkiä vakio-ikkuna avattuna/suljettuna. Voit myös selvittää onko selaimen muistissa vakio-nimistä ikkunaoliota ajamalla seuraava käsky selaimesi osoiterivillä (kopioi ja paina Enter):

javascript:alert(vakio);

Kahva löytyy mikäli funktioita on kutsuttu ja tällöin metodi palauttaa tiedon oliosta (object). Muussa tapauksessa funktiota ei olla kutsuttu (vakio-muuttuja on ainoastaan esitelty, mutta sitä ei olla alustettu), joten metodi palauttaa undefined-arvon.

Summa: tässä varmistetaan että olio on olemassa ennen kuin siihen viitataan, jotta vältyttäisiin ohjelmavirheeltä.

Uuden ikkunan automaattinen sulkeminen

Käytämme ikkunan automaattiseen sulkemiseen window-olion setTimeout-metodia. Määrittelemme myös uuden funktion ja kahvan:

<script type="text/javascript">
//<![CDATA[
var kahva2;
function AvaaJaSulje() {
 kahva2 = window.open('','senNimi','resizable=1,width=300,height=300');
 setTimeout('kahva2.close()',4000);
}
//]]>
</script>

Sitten kutsumme AvaaJaSulje-funktiotamme linkistä:

<a
 href="../code/js2/huom5a.htm"
 onclick="this.target='senNimi';AvaaJaSulje();">
 automaattisesti sulkeutuva ikkuna</a>

Linkkimme tulostuu dokumenttiin seuraavasti: automaattisesti sulkeutuva ikkuna. Kun funktiota kutsutaan setTimeout-metodin ensimmäinen parametri ajetaan vasta sitten kun toisena parametrina annettu aikajakso on kulunut, joten tässä tapauksessa metodi sulkee ikkunan neljän sekunnin kuluttua.

Huomaa seuraavat seikat yo. esimerkissä:

Kahvamme (kahva2) viittaa samannimiseen ikkunaan kun tätä edellisessä esimerkissä (senNimi), jolloin uutta ikkunaa ei avata, mikäli saman niminen on jo avattuna, vaan ainoastaan sisältö uusitaan.
Tässä funktiossa emme myöskään pyytäneet kohdistusta (focus-metodilla) avaamallemme ikkunalle, kuten edellisessä, joten jos senNimi on jo avattuna, niin ikkunan sisältö päivittyy (ja sulkeutuukin) taustalla.

Uuden ikkunan automaattinen sisällön vaihto

Tässä esimerkissä määrittelemme uuden funktion ja kahvan uuden ikkunan sisällön automaattiseen vaihtoon.

<script type="text/javascript">
//<![CDATA[
var kahva3;
function AvaaJaVaihda() {
 kahva3 = window.open('','uusiNimi','resizable=1,width=600,height=450');
 setTimeout('kahva3.location.href = "../code/example.htm"',5000);
}
//]]>
</script>

Sitten AvaaJaVaihda-funktion kutsu:

<a
 href="../code/js2/huom3a.htm"
 onclick="this.target='uusiNimi';AvaaJaVaihda();">
 automaattinen sisällön vaihto</a>

Linkkimme tulostuu dokumenttiin seuraavasti: automaattinen sisällön vaihto. Funktiota kutsuttaessa avataan uusi ikkuna, jonka sisältö vaihdetaan toiseen dokumenttiin viiden sekunnin kuluttua. Tässä scriptissä avattavan ikkunan nimi on eri (uusiNimi) kuin edellisissä, joten scriptin toiminta ei vaikuta edellisten esimerkkien ikkunoihin lainkaan.

Lisäesimerkkejä

Lisää erilaisia toteutuksia löytyy vaikeimmista JavaScript-esimerkeistä (Popup-ikkunat).

Viimeinen päivitys: 2004-02-21

Osmo Saarikumpu