Startseite aufrufen
« Zurück
Vor »

Kommentar schreiben | Drucken

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:

  • Mit diesem Umstand leben und den Link im alten Fenster öffnen, selbst wenn die Benutzbarkeit der Seite darunter leidet.

  • Wir können weiterhin target einsetzen und damit invalides XHTML schreiben.

  • Wir können das DTD von XHTML Strict auf XHTML Transitional ändern, weil dort das Attribut target noch erlaubt ist. Auf der anderen Seite bedeutet der Wechsel von Strict auf Transitional einen Rückschritt, weil Transitional nur ein Übergangskompromiss zu nachfolgenden XHTML-Versionen ist. XHTML Strict hat mehr Ähnlichkeiten mit zukünftigen Versionen von XHTML, weil es target dort ebenfalls nicht mehr geben wird.

  • Wir öffnen ein Fenster durch JavaScript. Dadurch bleibt der XHTML-Code valide, müssen allerdings in Kauf nehmen, dass vielleicht nicht jeder Besucher JS aktiviert hat.


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>


Geschrieben von
Wolfgang (anonym)
-- 11.Mai 2007 (#5)

Möchte mal wissen, wo da der Fortschritt sein soll, für solch einen Pubs nun Javascript einsetzen zu müssen. Kopfschüttel.

Geschrieben von
Boandlkramer (anonym)
-- 16.Dezember 2008 (#12)

merci, funzt einwandfrei.. eine grosse hilfe

Geschrieben von
Alex S. (anonym)
-- 04.Oktober 2005 (#3)

Es gäbe noch eine Zwischenlösung (für das Beispiel oben):

im HTML-Code den Link folgendermaßen kennzeichen:

<div id="link">
<a href="meine_seite.html">Neues Fenster öffnen</a>
</div>

und im JS-Code Folgendes hinzufügen:

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

Ist JS im Browser deaktiviert, öffnet sich der Link im gleichen Fenster; mit JS wird er ersetzt durch die JS-Version. Man grenzt somit Browser ohne JS nicht aus, indem der Link für sie unerreichbar wird.

Geschrieben von
Dirk
-- 22.September 2005 (#2)

Thanks. What about Google Language Tools? ;-)
Okay, Google’s translations sound a bit clumsy.

Geschrieben von
Dave Jackson (anonym)
-- 22.September 2005 (#1)

Hmm, wish I could read this. Glad your are blogging about SEO and website optimization. Thanks for the nice effort.

Geschrieben von
Dirk
-- 04.Oktober 2005 (#4)

Hmm, eine gute Ergänzung.

Das Hinzufügen von Kommentaren wurden deaktiviert.