Ikkunoiden avaus

JavaScript tarjoaa muutaman valmiin keinon avata ikkunoita erilaisia tarkoituksia varten.

window.alert()

Yksinkertaisin ikkuna on ilmoituspop-up.

<script language="JavaScript">

function avaa(){
	window.alert("Jokin viesti käyttäjälle.");
}

</script>

<input type="button" value="Avaa ikkuna" 
	onClick="avaa();0" />

window.confirm()

Seuraava vaihtoehto on pyytää käyttäjää vahvistamaan jokin asia.

<script language="JavaScript">

function conavaus(){

	var vastaus = window.confirm("Kysymys käyttäjälle?");
	
	if (vastaus == true){
		window.alert("Vastasit ok");
	}else if (vastaus == false){
		window.alert("Vastasit peruuta");
	}
}

</script>

<input type="button" value="Avaa ikkuna" 
	onClick="conavaus();" />

Esimerkissä näemme, että window.confirm -metodissa käyttäjän vastaus voidaan tallentaa... tässä tapauksessa muuttujaan nimeltä vastaus. Jos käyttäjä on vastannu Ok confirm ikkunassa, niin vastaukseen tallentuu totuusarvo true. Jos taas käyttäjä on vastannut Peruuta, niin vastaukseen tallentuu totuusarvo false.

Seuraavilla riveillä voimmekin tehdä jotain riippuen siitä, mikä vastaus on ollut.

window.prompt()

<script language="JavaScript">

function promptavaus(){

	var vastaus = window.prompt("Kysymys käyttäjälle?","Vaihtoehtoinen oletusvastaus");

	window.alert("Vastasit :\n" + vastaus);	
	
}


</script>

<input type="button" value="Avaa ikkuna" 
	onClick="promptavaus();" />

Esimerkissä prompt-ikkunan käyttäjän vastaus tallentuu muuttujaan nimeltä vastaus joka on käytettävissä seuraavalla rivillä. Huomaa, että voimme käyttää myös \n käskyä, jos haluamme useamman rivin ikkunan tekstiin.

window.open()

Window.open() -metodi aukaisee uuden selainikkunan. Parametreillä voimme hallita, miten ja minkälainen ikkuna avautuu. Kaikki parametrit ovat vapaaehtoisia, ja voimme laittaa niistä funktiokutsuun vain ne, jotka palvelevat tarkoitustamme.

window.open("osoite","kohde","ominaisuudet");

Yksinkertaisimmillaan käsky avaa uuden ikkunan johonkin osoitteeseen. Kohde, eli avaako selain uuden ikkunan vai avataanko sivu samaan ikkunaan, voidaan määrätä toisella parametrillä.

<script language="JavaScript">

function avaaosoite(){
	window.open("http://www.helsinki.fi");		
}

function avaaosoite2(){
	window.open("http://www.helsinki.fi","_self");		
}


</script>

<input type="button" value="Avaa ikkunan omaan ikkunaan" 
	onClick="avaaosoite();"  />

<input type="button" value="Avaa ikkunan samaan ikkunaan" 
	onClick="avaaosoite2();"  />

Osoite on hyvä olla pitkässä muodossa, ts. osoite alkaa http:llä.

Seuraava esimerkki avaa ikkunan halutuilla ominaisuuksilla:

<script language="JavaScript">

function avaaominaisuuksilla(){
	window.open("http://www.helsinki.fi","","height=150,width=300,location=no,scrollbars=no");		
}


</script>

<input type="button" value="Avaa määrätyillä ominaisuuksilla" 
	onClick="avaaominaisuuksilla();"  />

Esimerkissä avautuvalle ikkunalle on annettu määräys, että se on 150 pikseliä korkea, 300 pikseliä leveä, siinä ei ole osoite-kenttää, eikä scrollauksia laidassa tai ikkunan alla.

Mahdollisia ominaisuuksia listattuna:

height	korkeus	pikseleinä
width	leveys	pikseleinä
top	avautuvan ikkunan etäisyys yläreunasta	pikseleinä
left	avautuvan ikkunan etäisyys vas. laidasta	pikseleinä
menubar	onko valikoita	yes, no, 1, 0
resizable	voiko kokoa muuttaa	yes, no, 1, 0
scrollbars	voiko scrollata	yes, no, 1, 0
status	onko status-kenttää	yes, no, 1, 0
titlebar	onko title-kenttä	yes, no, 1, 0
toolbar	onko selaimessa toolbar (IE ja Firefox)	yes, no, 1, 0

Avautuneen ikkunan hallinta

Seuraavassa esimerkissä on käytetty hyväksi window.opener -metodia, jonka avulla voidaan kutsua alkuperäiseen ikkunaan kirjoitettuja funktioita. Aluksi kuitenkin otetaan käyttöön kaksi muuttujaa, joita voidaan käyttää kaikkien funktioiden sisällä.


<script language="JavaScript">

var kysely;	//muuttuja johon avautuva ikkuna talletetaan (käytössä näin kaikissa funktioissa)

		//seuraavassa avattavan ikkunan ominaisuudet 
var ominaisuudet = "height=150,width=300,menubar=no,scrollbars=no,status=no,title=no,toolbar=no";


function avaakysely(){

	//käsketään avaamaan ikkuna halutuilla ominaisuuksilla ja talletetaan 
	//ikkuna-objekti muuttujaan nimeltä kysely
	kysely = window.open("","",ominaisuudet); 

	//kirjoitetaan kysely-ikkunaan oma html-koodi
	kysely.document.write("<h2>Kysely</h2>");
	kysely.document.write("Anna alle ikäsi:<br />");
	kysely.document.write("<form name='kysymys'>");
	kysely.document.write("<input type='text' name='vastaus' />");
	kysely.document.write("</form>");

	//window.opener. antaa mahdollisuuden suorittaa funktion alkuperäisestä ikkunasta
	kysely.document.write("<input type='button' value='OK' onClick='window.opener.suljeikkuna();' />");
			
}

function suljeikkuna(){

	//poimitaan ensin vastaus talteen
	var vastaus = kysely.kysymys.vastaus.value;
	
	//kirjoitetaan vastaus haluttuun paikkaan
	document.getElementById("ikaikkuna").innerHTML = "Vastasit : " + vastaus;

	//suljetaan kyselyikkuna
	kysely.close();	
}

</script>

<div id="ikaikkuna">Vastasit : </div>
<br />
<input type="button" value="Kokeile kyselyä" onClick="avaakysely();" />

Vastasit :