Siirry sivun sisältöön Avut CSS HTML JavaScript Kotisivu

Uusien ikkunoiden avaaminen

Selaimissa, jotka tukevat JavaScriptin window-olion open-metodia, voidaan avata uusia (ali-)ikkunoita, sekä hallita näiden ominaisuuksia, mikäli selaimen asetuksissa tätä ei ole estetty.

Sisällysluettelo

  1. Syntaksi
  2. Linkki yksittäiseen uuteen ikkunaan
  3. Linkit useampaan uuteen ikkunaan
  4. Ikkunan kahva
  5. Lisäesimerkkejä

Syntaksi

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

Parametrien kuvaus

  1. OSOITE - URL-osoitteesta koostuva merkkijono, esim. absoluuttisesti http://weppipakki.com/, tai suhteellisesti example.htm. Osoitteella määritellään uuden ikkunan sisältö, kuten Web-sivu, tai mikä tahansa selaimen tukema tiedosto.
  2. NIMI - Aakkosnumeerisista merkeistä (myös alaviiva käy) koostuva ikkunan nimi, esim. infoAkkuna. Ikkunan nimeä voidaan käyttää linkkien kohteena.
  3. 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ä:

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 avatun ikkunan ulkopuolelta. 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.

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ä:

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: 2011-12-23
Osmo Saarikumpu

yksi taso ylös