Pop-up vensters heb je wellicht al vele malen tegengegekomen bij je surftochten op het internet. Meestal onder de vorm van irritante reclamevensters bij het ophalen (load) of verlaten (unload) van een pagina. Je kan popup vensters echter ook op een nuttige manier aanwenden op een website.
Een popup maken
Volgende functie stelt je in staat een pop-up venster te openen, als argument geef je de URL mee van de te openen pagina:
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
function popitup(url)
{
newwindow=window.open(url,'name','height=200,width=150');
if (window.focus) {newwindow.focus()}
return false;
}
// -->
</SCRIPT>
De eerste opdrachtlijn leert je hoe je een popup kan openen:
newwindow=window.open(url,'name','height=200,width=150');
Een popup open je met de methode open van het object window. Deze methode ontvangt drie argumenten:
- URL van de te openen pagina
- naam voor de popup
Deze eigenschap voegt in feite niets extra toe aan de popup, maar zorgt er in bepaalde browsers voor dat dezelfde popup geen twee keer naast elkaar kan worden geopend.
- Met het derde argument kan je allerhande waarden instellen:
- width: breedte
- height: hoogte
- top: afstand t.o.v. bovenkant van het scherm
- left: afstand t.o.v. linkerkant van het scherm
- sceenX / screenY: positionering NS4 en Safari
- dependent: als de pagina die de popup opende wordt gesloten, wordt ook de popup gesloten (Mozilla, NS). (yes / no)
- directories: weergeven van de 'directories' (IE: werkbalk koppelingen) (yes / no).
- fullscreen: popup opent in volledige schermmodus (yes / no).
- location: adresbalk weergeven (yes / no).
- menubar: menubalk weergeven (yes / no).
- resizable: afmetingen zijn aanpasbaar (yes / no).
- scrollbars: de popup kan scrollbalken hebben
- status: weergeven van de statusbalk (yes / no).
- toolbar: weergeven van de knoppenbalk (yes / no).
In de eerst opdracht merk je dat we het popupvenster stockeren in een variabele (newwindow), zodanig dat we er verderop in de code kunnen naar verwijzen.
De tweede opdracht geeft het popupvenster de focus, zodat het venster zeker wordt getoond en niet verscholen zit achter een ander venster. Doordat niet alle browsers de methode focus ondersteunen testen we eerst of deze methode gekend is door de browser.
if (window.focus) {newwindow.focus()}
De derde opdracht retourneert
false, zodanig dat wanneer we de code oproepen vanuit een hyperlink, er geen koppeling wordt gevolgd, maar enkel de pop-up wordt geopend:
Een popup openen
Bovenstaande code geeft je een functie op een popup te maken, deze functie kunnen we nu eenvoudig koppelen aan bv. een hyperlink.
<a href="vb/popupvb.html" onClick="return popitup('vb/popupvb.html')"
>Open popup</a>
Een popup sluiten
Wanneer je popup hebt toegekend aan een variabele, dan kan je deze eenvoudig sluiten met de methode close. Vooraleer we de methode close uitvoeren testen we eerst of de popup reeds is geopend door na te gaan of de variabele newwindow bestaat.
<A HREF="javascript:if (newwindow) newwindow.close()"
>Sluit popup.</A>
Schrijven in een popup
Wanneer je bij het maken van een popup het eerste attribuut leeglaat kan je zelf dynamisch de inhoud van de popup bepalen. Het popupdocument-vullen doe je eenvoudig met de methode write van het object document van de popup.
De opdracht newwindow2.document.close(); duidt voor de browser aan dat er niet meer zal geschreven worden in de popup. Deze opdracht sluit de popup niet af, dit zou je kunnen met newwindow2.close();
function popitup2()
{
newwindow2=window.open('','name','height=200,width=250');
var nu = new Date();
var tijd = nu.getHours() +":" +nu.getMinutes() +":" +nu.getSeconds()
var strHTML = "<html><head><title>Dynamische popup</title></head>";
strHTML += "<body>";
strHTML += "Popup gemaakt om: " +tijd;
strHTML += "</body>";
strHTML += "</html>";
newwindow2.document.write(strHTML);
newwindow2.document.close();
if (window.focus) {newwindow2.focus()}
return false;
}
Opener manipuleren
Wil je vanuit de popup de bronpagina beïnvloeden, dan kan door het object opener aan te spreken vanuit de popup.
popupvb2.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Javascript: popups</title>
<script type="text/javascript">
<!--
function verander_opener(url)
{
opener.location.href = url;
}
-->
</script>
</head>
<body>
Ik ben een popup
<p>
<a href="javascript:verander_opener('../dom.asp')">DOM</a>
<br><a href="javascript:verander_opener('../events.asp')">Events</a>
<br><a href="javascript:verander_opener('../vensters.asp#popup')">Vensters - popup</a>
</body>
</html>
popup openen met de functie popitup:
<a href="vb/popupvb2.html" onClick="return popitup('vb/popupvb2.html')">Open popup</a>
Opgepast, wanneer de popup frames bevat is de opener te manipuleren vanuit de top-locatie:
top.opener.location.href = url;
Opener sluiten
Je kan de bronpagina sluiten met volgende opdracht:
In sommige browsers wordt nu een waarschuwing getoond, en moet de gebruiker het sluiten van deze pagina bevestigen. Dit komt doordat de bronpagina door de gebruiker werd geopend, en niet door een ander venster: de bronpagina heeft geen opener.
Dit kan je in bepaalde browsers eenvoudig omzeilen door voor het sluiten van de bronpagina een waarde in te stellen voor de opener van de bronpagina:
opener.opener = top; //willekeurige waarde instellen
opener.close()
Toon /verberg
