JavaScript/XHTML: Neues Fenster (PopUp) öffnen

-- 21.September 2005 (#41)

In der Strict-Variante wurde es „verboten“, Links in neuen Fenstern zu öffnen – das target-Attribut führt somit zu invaliden XHTML-Code und wird von Validatoren bekrittelt.
Im Prinzip ist dies durchaus sinnvoll und ein Plus an Usability, denn nur selten wird gekennzeichnet, ob Links nun im alten oder im neuen Fenster (respektive Tab) geöffnet werden. Das Verhalten eines Links ist daher leider unberechenbar.
XHTML Strict räumt damit auf und verbietet es einfach, dass ein Link das Öffnen eines neuen Fenster auslöst. Jeder Besucher kann dann selbst entscheiden, ob er einen Link vielleicht doch in einem neuen Fenster öffnen möchte.

Leider ist es manchmal eben doch nötig, ein neues Fenster zu öffnen. Was tun? Wir könnten:


Eigentlich sind alle vier Möglichkeiten unausgegoren. Ich setze auf die vierte Möglichkeit und öffne neue Fenster durch JavaScript. Der folgende JavaScript-Code öffnet ein Popup mit einer Breite von 480 Pixeln; die Navigationselemente werden ausgeblendet.

Code:

<script type="text/javascript">
<!--
function popUp1(seite)
   {
   var eigenschaft,sbreite,shoehe,fenster02;
 
   //Bildschirmauflösung ermitteln:
   var ns6=(!document.all && document.getElementById);
   var ie4=(document.all);
   var ns4=(document.layers);

if(ns6||ns4)
      {
      sbreite = innerWidth;
      shoehe = innerHeight;
      } else if(ie4)
         {
         sbreite = document.body.clientWidth;
         shoehe = document.body.clientHeight;
         }
 
   fensterbreite=480; //fensterbreite=outerWidth; um Fenster in voller Breite zu öffnen
   shoehe=shoehe+100;
   x=(sbreite-fensterbreite);

   popUp=window.open(seite, 'NewWindows', 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, width='+fensterbreite+', height='+shoehe+', left='+x+', top=0');
   };
// -->
</script>


Anwendung
In diesem Beispiel wird durch JavaScript die Datei meine_seite.html im neuen Fenster geöffnet:

<a href="javascript:popUp1('meine_seite.html')">Neues Fenster öffnen</a>