sivut.web

ohjeita web-sivuston tekijälle

JavaScript: Uuden ikkunan avaaminen

Uuden ikkunan avaaminen tulisi olla aina hyvin perusteltua. Mainosten tai mainostajan sivun avaaminen uudessa ikkunassa ei tuo ratkaisevasti kilisevää mainostunnuksellesi ja karkottaa varmasti kävijät sivultasi. Toisaalta joillekin sivuille itsestään aukeava ikkuna sopii kuin nenä päähän. Useat yritykset käyttävät erillisiä ikkunoita mm. esitteiden ja tiedoitusten verkottamisessa. Toisaalta koko sivu voidaan ahtaa yhteen, normaalia pienempään ikkunaan kunniallisesti. Tälläisille sivuille on grafiikankin suunnittelu normaalia helpompaa, sillä skaalautuminen voidaan käytännössä unohtaa heti ikkunoista puhuttaessa.

Uuden ikkunan avautuminen voidaan toteuttaa millä tahansa tapahtumafunktiolla, esim. onLoad (sivun latautumisen yhteydessä) tai vaikkapa onClick (esim. napista painettaessa). Ikkunan avautumismetodia kannattaa sitäkin harkita tarkkaan. Huonosti toteutettu ikkuna ei palvele asiaansa.

Kirjoittakaamme ensin itse ikkunan avaamisen suorittava koodinpätkä <head>- tagien väliin.

<script language="JavaScript">
// <!--       * piillotetaan koodi vanhemmilta selaimilta HTML-kommenttitagein
function ikkunanAvaaja()
{
    window.open('uusi_ikkuna.html', 'ikkunan_nimi', 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizeable=no, width=500, height=350');
}
// -->
</script>

Huom! {- ja }- merkkien välissä oleva koodi tulee olla samalla rivillä.

Muokkaa koodia siten, että uusi_ikkuna.html on sivun osoite, jonka halutaan avautuvan, uusi_ikkuna on ikkunan nimi (jolla sitä voidaan kutsua muista ikkunoista).

Voit myös muuttaa halutessasi ikkunan ominaisuuksia:

ominaisuus suomeksi arvot
toolbar navigointipalkki yes/no
location osoitepalkki yes/no
directories hakemistopalkki, "personal toolbar" yes/no
status alakerran statuspalkki, joka kertoo selaimen tilan yes/no
menubar valikot "file, edit, view, ..." yes/no
scrollbars vierityspalkit yes/no
resizeable koon muuttamismahdollisuus yes/no/auto
width leveys pikseleinä luku
height korkeus pikseleinä luku

Ikkunan avaamista tukevat ainakin Netscape 2.0 ja Internet Explorer 3.0 sekä niitä uudemmat selaimet.

Tämä sivu on luotu 4.10.1998 ja viimeksi päivitetty 9.7.2002.


Käyttäjien kommentit

11.12.2003 20:55
JM

Tätä pätkää on tullut etittyä ja löytyipä vielä simppelissä muodossa... >> 10+ <<<

26.1.2004 20:18
Juno

Kiitos vinkeistä. Miten onnistuu ikkunan avaaminen kun olen käyttänyt kehyksiä (menu ja main?) Java pätkä on sijoitettu menu -frameen. Parent.open avaa koko näytöllä, mutta miten saan sen "ahdettua" title-frameen? Target komennolla ei tunnu onnistuvan vai laitoinko sen väärään paikkaan?

28.1.2004 21:56
Juha-Pekka Järvenpää <jp@sivut.org>

Täältä löytyy vastaus:

http://www.hut.fi/~ssarkka/javascript/www.html#obj_html

Kehystettyyn dokumenttiin viittaat siis näin:

window.kehyksennimi.document

8.6.2004 01:25
nd

www.w3schools.org - todella hyvä paikka oppia javascriptiä. Ainakin minua innosti 'kokeile itse' esimerkit missä.... aah en jaksa selittää menkää vaan sinne

20.7.2004 13:26
enska <enskaj@hotmail.com>

Miten saa, että kun painaa linkkiä niin se avaa tietyn kokoisen ikkunan?? toimiiko <a href="index2.html" height="400" width="200" target="blank">, koska useimmilla on popup esto päällä joten toi ikkuna ei aukia.

21.7.2004 08:38
Juha-Pekka Järvenpää <jp@sivut.org>

Ikkunan saa avautumaan linkistä liittämällä onClick-tapahtumametodin linkkielementtiin.

<a href="#" onClick="ikkunanAvaaja()">linkkiteksti</a>

"toimiiko <a href="index2.html" height="400" width="200" target="blank">"

Kuten varmaan itsekin huomaat, niin ei toimi. A-elementillä ei ole olemassa määritteitä height tai width.

12.4.2005 19:17
entäs <jollikulli@luukku.com>

Entäs onkos jotenkin mahdollista määrittää myös mihin kohtaan sivua popup aukeaa?

14.7.2005 14:46
Jusa

On mahdollista määrittää, mihin kohtaan sivu aukeaa.

Katso osoitteesta http://www.weppipakki.com/js/js2.htm viimeiset vaihtoehdot.

25.7.2005 11:02
Raija Ylönen <etunimi.sukunimi@jippii.fi>

Kun vielä lisäät tyypin, niin ettei validaattori herjaa. Itse en ole mikään guru, mutta sain tämän vinkin web-suunnittelun opettajalta.
Pitäisi aina tehdä validia koodia.

<script language="JavaScript" type="text/JavaScript">

20.9.2005 08:47
Koodinvääntäjä

Hei!
Miksi joidenkin sivujen (esim. koulukanava.fi) javascripti tulee selaimessani (IE6 SP2) nätisti näkyviin ja toimii, mutta itse laatimani sivujen javascripti on mokoman tietopalkin taakse 'kielletty', vaikka olen mielestäni Internet asetuksista poistanut kaikki mahdolliset estot (popup-ikkunat, komentosarjat)?

Ihme ja kumma...

22.9.2005 17:29
Kissafani

Tää uue ikkuna avaus on nii tärkee ainaki mu sivuilla. Hyvä ku on tälläset sivut olemassa ku nää. Täält löytää nii paljo kaikkee koodii!

23.10.2005 17:21
Harri <harri.vesanto@kolumbus.fi>

Pikku ongelma
Sori, mutta tuo terminologia ei ole minulle mitenkään hallinnassa, joten ajattelin kysyä neuvoa näin kansanomaisin termein.
Sain rakennettua tuon ikkunan avauksen niinkuin sen halusinkin, mutta ongelmanani on nyt, että kun linkitän sen jonkun sivun kauta, niin eikö tuo pahalainen avaa sen tyhjänkin sivun, eli miten saan sen tyhjän sivun jäämään pois??
Konkreettisesti ongelmani ilmenee sivulla www.voppari.con / Jäseniltä
Olen koittanut kaikenlaisia keinoja asian korjaamiseksi, vaan turhaan. Uskon kuitenkin, että ongelmani ei ole siiri kun asian vain ymmärtää..
Hyvää alkanutta syksyä.. harri

23.10.2005 17:23
harri vielä

tuo osoite on http://www.voppari.com eikä siis con

3.5.2006 00:13
Jukkis

Siis eikös toi kuitenkin avaa sen just uuteen määritetyn kokoseen ikkunaan...koska tuolla on määritetty uuden ikkunan leveys ja korkeus...

23.10.2006 20:24
Stauts <stauts.online@gmail.com>

Minä kun pistän tuon
"<a href="#" onClick="ikkunanAvaaja()">linkkiteksti</a>"
niin se kyllä aukeaa uudessa ikkunassa, mutta myös siinä mistä minä sen painan. Eli avautuu kaksi samaa sivua.

18.11.2006 13:20
Hanttihemmot <tea@poptravel.fi>

Voisikohan tuohon edelliseen kysymykseen saada jotain vastausta - minulle käy sama juttu, että sama sivu aukeaa se popupissa että siinä varsinaisella sivulla. Miten se estetään?

12.11.2007 13:42
zazu

Ottakaa heref -tagi pois. Sitten toimii.

Lisää oma kommentti


Juha Kujala
comber@iki.fi
http://www.iki.fi/comber/