WebStudie: Websmeden, JavaScripts, Pop-up vinduer

Du er her: WebStudie

Websmeden

JavaScripts

Pop-up vinduer

JavaScripts - Pop-up vinduer

I din surfen på nettet har du sikkert oplevet, at der automatisk åbnes et HTML-dokument i et nyt browser-vindue eller at et link åbnes i et nyt browser-vindue.

Se et eksempel på et pop-up vindue.

I det følgende kan du se, hvordan du laver og styrer dimensionerne af et pop-up vindue.

Ønsker du, at der automatisk åbnes et pop-up vindue, samtidig med at et HTML-dokument indlæses i browseren, skal du indsætte JavaScript-sætningen i HTML-dokumentets HEAD-sektion:

<SCRIPT> window.open('eksempel.html','vinduenavn', 'screenX=10 , screenY=10 , menubar=yes , toolbar=yes , status=yes , resizable=yes , width=350 , height=300 , scrollbars=yes') </SCRIPT>

Vil du bruge et pop-up vindue i et link, kan du indsætte JavaScript-sætningen i en såkaldt onClick-event:

<A HREF="" ONCLICK="window.open('eksempel.html','vinduenavn', 'menubar=no , toolbar=no , status=no , resizable=yes , width=350 , height=300 , scrollbars=yes'); return false">klik her</A>

Du kan selvfølgelig også vælge at definere pop-up vinduet som en JavaScript funktion, som placeres i sidens HEAD-sektion. Funktionen kaldes via onLoad i BODY-tag'en eller via onClick i link referencen. JavaScript funktionen kunne f.eks. så således ud:

<SCRIPT>  </SCRIPT>

Skal pop-up vinduet åbnes med en forsinkelse på f.eks. 7 sekunder, skal JavaScriptet udvides med koden ID=window.setTimeout("popup();",7000);, hvor popup() er funktionens navn og 7000 angiver antal millisekunder (1000 = 1 sekund). JavaScriptet kommer så til at se således ud:

<SCRIPT>  </SCRIPT>

Ønsker du at pop-up vinduet automatisk åbnes, når siden indlæses i browseren, så kan BODY-tag'en så således ud:

<BODY BGCOLOR="#CCCCCC" TEXT="Black" LINK="#330099" VLINK="#993399" ALINK="#CC0066" ONLOAD="popup()">

Ønsker du derimod, at pop-up vinduet åbnes via et link, så kan linket se således ud:

<A HREF="" ONCLICK="popup()">

JavaScript-sætningens attributter kan antage følgende værdier:

eksempel.html
- angiver adressen på det HTML-dokument, som skal vises i pop-up vinduet.
vinduenavn
- navnet på pop-up vinduet. Må ikke indeholde mellemrum eller specialtegn.
screenX og screenY (pixels)
- angiver pop-up vinduets absolutte placering i pixels fra X- og Y-aksen i det oprindelige browser-vindue. Parametrene virker kun i Netscape.
menubar (yes eller no)
- angiver om pop-up vinduet skal indeholde en menulinie.
toolbar (yes eller no)
- angiver om pop-up vinduet skal indeholde en værktøjslinie.
status (yes eller no)
- angiver om pop-up vinduet skal indeholde statuslinie (proceslinie).
resizable (yes eller no)
- angiver om det er muligt at ændre størrelsen af pop-up vinduet ved fx. at trække i vinduets kant.
width (pixels)
- angiver pop-up vinduets bredde i pixels.
height (pixels)
- angiver pop-up vinduets højde i pixels.
scrollbars (yes eller no)
- angiver om pop-up vinduet skal indeholde en scrollbar.

Luk pop-up vinduet med følgende:

<A HREF="eksempel.html" ONCLICK="window.parent.close(0); return true">farvel og tak</A>

[ start ] [ indhold ] [ e-mail ]