af Jonas Astrup, HTML.dk
Sidst opdateret 17. november 2000
Denne artikel omhandler hvordan man kan åbne og lukke popup vinduer med funktionen window.open() i javascript.
Popup vinduer kan bruges til mange nyttige ting, f.eks. til at give små uddybende informationer eller hjælpetekster. Det kan også være at man har brug for et vindue i en speciel størrelse, eller uden adresselinie, ikoner, eller andet. Mulighederne er mange.
Popup vinduer kan dog også benyttes til mange unyttige ting, som blot nedsætter brugervenligheden på et site. Denne artikel tager dog ikke stilling til anvendelsen af popup vinduer, men forklarer hvordan man laver dem - herefter er det op til den enkelte webmaster at tage stilling til om man vil benytte dem eller ej.
Til at åbne nye browser vinduer med javascript benyttes metoden window.open(). Metoden kaldes med en række parametre på formen:
window.open(URL, Navn [, Egenskaber])
target i <a> eller <form> hvis man ønsker at en ny side skal vises i et allerede åbent vindue.Blot ved hjælp af ovenstående ovenstående information er vi istand til at lave vores første link til et popup vindue. Det bliver et ganske almindeligt browser vindue uden specielle egenskaber, koden til linket ser således ud:
<script type="text/javascript">
window.open("dokument.htm","mitvindue")
</script>
Det kunne vi jo ligeså godt have lavet uden javascript - blot ved at lade vores link åbne i et nyt vindue. Så lad os straks kigge på hvordan man arbejder med egenskaber.
Lad os sige at vi ønsker at åbne et browservindue uden menulinje og værktøjslinie, men med et adressefelt. Her skal vi kigge nærmere på egenskaberne menubar, toolbar og location.
Når disse egenskaber sættes til værdien "yes" vises de pågældende elementer i browservinduet, ellers vises de ikke. Standard værdien for egenskaberne er "no".
Det vil sige at vi blot behøver at sætte egenskaben location til "yes". Derved får vi et popup vindue med adressefelt, og uden menulinje og værktøjslinie.
<script type="text/javascript">
window.open("dokument.htm","mitvindue","location=yes")
</script>
Det er også muligt at definere højden og bredden på vinduet. Lad os sige at vi ønsker et vindue, som er 500 px bredt og 150px højt. For at definere højde og bredde benytter vi egenskaberne height og width.
Disse egenskaber sætter højde og bredde på det nye vindue i pixels. Som nævnt ovenfor skrives egenskaberne som en kommasepareret liste, hvilket betyder at de to egenskaber defineres som følger:
<script type="text/javascript">
window.open("dokument.htm","mitvindue","width=500,height=150")
</script>
Bemærk at vinduet åbner uden adressefelt, menulinje o.s.v. - standardværdien for disse egenskaber er jo som nævnt ovenfor sat til "no", derfor vises de kun hvis de sættes til "yes".
Der findes en lang række øvrige egenskaber. Disse er listet nedenfor med beskrivelse. Husk at hvis der defineres flere egenskaber, skal disse blot defineres som en kommasepareret liste.
| Egenskab | Beskrivelse |
|---|---|
| alwaysLowered | Hvis sat til "yes", åbnes et vindue som altid befinder sig under andre vinduer. |
| alwaysRaised | Hvis sat til "yes", åbnes et vindue som altid befinder sig over andre vinduer. |
| dependent | Hvis sat til "yes", bliver det nye vindue et child til det eksisterende vindue (lukker automatisk når det oprindelige vindue lukkes, og figurerer ikke i startlinjen med aktive vinduer i Windows). |
| directories | Hvis sat til "yes", har det nye vindue standard directory knapper. |
| height | Sætter den ydre højde på det nye vindue i pixels. |
| hotkeys | Hvis sat til "no", forsvinder muligheden for at benytte genvejstaster i et vindue uden menubar. |
| innerHeight | Sætter den indre højde på det nye vindue i pixels. |
| innerWidth | Sætter den indre bredde på det nye vindue i pixels. |
| location | Hvis sat til "yes", vises standard Adressefelt i det nye vindue. |
| menubar | Hvis sat til "yes", vises standard menu bar (File, Edit, View, etc.). |
| outerHeight | Dette sætter den ydre højde på det nye vindue i pixels. |
| resizable | Hvis sat til "yes" har brugeren ret til at resize vinduet. |
| screenX | Denne egenskab definerer placeringen af det nye vindue med antallet af pixels fra venstre side af skærmen. |
| screenY | Denne egenskab definerer placeringen af det nye vindue med antallet af pixels fra toppen af skærmen. |
| scrollbars | Hvis sat til "yes" vises standard horisontal og vertikal scrollbars, hvis de behøves |
| status | Hvis sat til "yes", vil det nye vindue have standard browser status bar i bunden af vinduet. |
| titlebar | Hvis sat til "yes" vil det nye vindue have standard title bar. |
| toolbar | Hvis sat til "yes" vil det nye vindue have standard browser værktøjslinie (Frem, Tilbage, etc.). |
| width | Sætter den ydre bredde på det nye vindue i pixels. |
Brugerne kan altid lukke dine popup vinduer, simpelthen ved at lukke vinduet med X'et i øverste højre hjørne. Men måske har du behov for et link i popup vinduet, som f.eks. "luk dette vindue".
For at lukke et vindue benyttes metoden window.close(). Det vil sige at du i det dokument, som vises i popup vinduet kan tilføje følgende kode:
<a href="" onclick="window.close();"> Luk dette vindue</a>
Ovenfor har vi blot vist koderne som javascript. Hvis du ikke har arbejdet med javascript før undrer du dig måske over hvordan man laver links, som åbner de nye vinduer.
For at lave et almindeligt tekstlink benyttes onclick, som ganske simpelt angiver hvad der skal ske når der klikkes på linket.
<a href="" onclick="window.open('dokument.htm',
'mitvindue');return false;">
Tekst til linket</a>
<form>
<input type="button" onclick="window.open('dokument.htm',
'mitvindue');return false;">
</form>
Hvis du har brug for at åbne mange ens popup vinduer i det samme dokument, kan det være en fordel at lave en javascript funktion, som kan kaldes med det dokument, som skal vises i det nye vindue.
Et simpelt eksempel på en sådan funktion kunne være:
<script type="text/javascript">
function MinPopUp(MinURL) {
window.open(MinURL,'popup','height=100,width=100');
}
</script>
Denne funktion kan nu kaldes overalt i dokumentet på følgende måde:
<a href="" onclick="MinPopUp('dokument.htm');return false;">
Tekst til linket</a>
