Target Blank im Strict Mode

Wenn man seine Webseiten im HTML Strict Mode schreibt erlaubt das W3C keine Verwendung von target=”_blank” was bedeutet ich kann nicht wie gewohnt einen Link in einem neuen Fenster öffnen.

Ich habe dafür einen kleinen Workaround in JavaScript geschrieben der ohne eine Java Script Bibliothek wie jQuery auskommt.

Das Script funktioniert in allen gängigen Browsern bis hinunter zum IE6.

Ihr müsst nur den Links die in einem neuen Fenster öffnen sollen ein rel Attribut mit wem Wert external mitgeben .. also einfach rel=“external”.

Hier das Target Blank Script:

var targetBlank = {
    setListener: function() {
      var links = document.getElementsByTagName(“a”);
      for (var i = 0; i < links.length; i++) {    
        var rel = links[i].getAttribute(“rel”);
        if (rel==‘external’) {    
          var blank = document.createAttribute(“target”);
          blank.nodeValue = “_blank”;
          links[i].setAttributeNode(blank);
        }  
      }
    },

init: function() { this.setListener(); }, addEvent: function(obj, type, fn) { if (obj.addEventListener) obj.addEventListener(type, fn, false); else if (obj.attachEvent) { obj[“e”+type+fn] = fn; obj[type+fn] = function() {obj[“e”+type+fn]( window.event );} obj.attachEvent(“on”+type, obj[type+fn]); } } }; targetBlank.addEvent(window, ‘load’, function(){ targetBlank.init(); });

Folgendes passiert:

  • in der Funktion addEvent wird geschaut mit welchem Browser wir es zu tun haben
  • der IE verwendet die attachEvent Methode, alle anderen Browser addEventListener
  • die Funktion setListener schaut wieviele a Tags sich im DOM befinden
  • für jedes a Tag wird dann das rel Attribut abgefragt
  • wenn es da ist gibt es den Wert von rel zurück wenn nicht null
  • dann erzeugt das Script für jedes rel=“external” ein target=“blank” und schreibt es in den DOM

Das wars auch schon .. wir haben den Strict Mode damit umgangen .. das Dokument validiert und wir können trotzdem Links in neuen Fenstern öffnen.

Leave a Reply

Your email address will not be published. Required fields are marked *