NIWO - nl.internet.www.ontwerpFAQ

Hoe open ik een popup window?

Een link laten openen in een nieuwe window kan veelal door een target attribuut toe te voegen:

001  <a
002   href   = "document.html"
003   target = "windowNaam"
004  >Document in nieuwe window</a>

Nu zal de browser een window aanmaken met de naam 'windowNaam' als er nog geen window met die naam bestaat en anders het document in de bestaande window met die naam laden. Als er altijd een nieuwe window moet worden aangemaakt kun je de de gereserveerde target-naam _blank gebruiken. De browser zal dat steeds een nieuwe, naamloze window aanmaken.

Als je geen target-attribuut wilt of kunt gebruiken, omdat je bijvoorbeeld een (X)HTML document schrijft waarbinnen dat attribuut niet mag worden gebruikt, of je stelt eisen aan de verschijningsvorm van de nieuwe window, dan kun je gebruik maken van JavaScript:

001  <a
002   href    = "document.html"
003   onclick = "return !window.open(this.href)"
004  >Document in nieuwe window</a>

Dit is de eenvoudigste manier om met script een nieuwe window aan te maken. Bij een klik op de link zal eerst het bij onclick gegeven script worden uitgevoerd. Wat het script doet is de open methode van window gebruiken om een nieuw window object te creëren. Als dat niet lukt zal het resultaat van de aanroep geen window object zijn en zal de browser gewoon 'document.html' in de bestaande window laden. Als de aanmaak wel slaagt dan verandert er in de bestaande window verder niets, maar zal 'document.html' in het nieuwe venster worden geladen.

Om de afmetingen van de de te creëren window naar wens te laten zijn kun je bij de aanroep aan de open methode extra argumenten geven, zoals:

001  window.open(this.href, "windowNaam", "width=640,height=480")

Nu zal de nieuwe window een breedte van 640 en een hoogte van 480 krijgen. De window zal in de bekende browsers niet alle onderdelen hebben die de hoofd-window heeft, zoals een knoppenbalk, omdat niet expliciet is opgegeven dat de aan te maken window die voorzieningen hebben moet. Zie voor alle mogelijke opties in het 3e argument, de z.g. features string, de specificaties van de verschillende browserfabrikanten.

Voor een enkele link zal het onclick script nu wel voldoen, maar als er meerdere links in een nieuwe window moeten openen kun je beter een gepaste JavaScript functie schrijven voor het openen van de window. Een wat uitgebreidere functie kan dan ook de nieuwe window in het midden van het scherm laten verschijnen en een bestaande popup sluiten alvorens een nieuwe aan te maken. Op die manier kan een geminimaliseerde popup weer in beeld komen:

001  var popupWindow = null;
002  
003  function closePopupWindow() {
004    if (popupWindow    (typeof(popupWindow.closed) !=  'undefined ')
005        !popupWindow.closed) popupWindow.close();
006    popupWindow = null;
007  }
008  
009  window.onunload = closePopupWindow;
010  
011  function openWindow(url, width, height) {
012    if (!window.open) return true;
013    var x = (screen.width -width)  >> 1;
014    var y = (screen.height-height) >> 1;
015    closePopupWindow();
016    popupWindow = window.open(url, 'windowNaam',
017       'width='    + width  +
018       ',height='  + height +
019       ',left='    + x +
020       ',top='     + y +
021       ',screenX=' + x +
022       ',screenY=' + y +
023       ',scrollbars=yes');
024    if (!popupWindow) return true;
025    if (!popupWindow.opener) popupWindow.opener = self;
026    popupWindow.focus();
027    return false;
028  }

Plaats dit script in een <SCRIPT> element in de head-sectie van een document, of in een extern .js-bestand. Het script zal bij het verlaten van het document een bestaande popup automatisch sluiten.

Een link ziet er nu zo uit:

001  <a
002   href    = "document.html"
003   onclick = "return openWindow(this.href, 640, 480)"
004  >Document in nieuwe window</a>

Wees je ervan bewust dat een popup niet altijd zal verschijnen. Een browser hoeft de aanmaak van nieuwe windows niet te ondersteunen. Ook zal niet iedere bezoeker blij zijn met een nieuwe window bij iedere klik.