Von allen guten und bösen Geistern verlassen

In einem Beitrag im Forum von WordPress.de wurde gefragt, wie sich Link in einem neuen Fenster öffnen lassen. Zusätzlich sollte die Größe festgelegt und die Adressleiste ausgeblendet werden. Abgesehen davon, daß Popups so was von Web 1.0 sind, führt die Verwendung des _target Attributes dazu, daß die Seite nicht mehr XHTML-strict valide ist.

Es mag an der nun endlich scheinenden Sonne liegen, an einer Zutat im Kaffee oder wie auch immer, jedenfalls verspürt dich die Neigung, mir das Problem mal näher anzusehen und eine einfach Lösung zu finden. Einen Ansatz dazu bot mir LighboxJS, da dort in dem Script das Attribut rel verwendet wird, um den Hyperlinks einen Funktionsaufruf automatisch zuzuweisen.

Die daraus entwickelt Lösung funktioniert recht einfach. Jeder Link, der in einem externen Fenster geöffnet werden soll, bekommt ein extprechendes rel-Attribut verpasst: rel=“heypopup“
Ein Link auf eine externe Seite würde dann so aussehen:
<a rel=“heypopup“ href=“http://meinetolleurl.de“>klick mich</a>

Damit das funktioniert, wird im Header folgendes JavaScript hinzugefügt:

<script type="text/javascript">

function openHeyPopup(objectLink) {

window.open(objectLink, "Externer Link",  "width=700,height=600,scrollbars=yes");

}
function initHeyPopup()
{
if (!document.getElementsByTagName){ return; }
var anchors = document.getElementsByTagName("a");

for (var i=0; i<anchors.length; i++){
var anchor = anchors[i];

if (anchor.getAttribute("href") && (anchor.getAttribute("rel") == "heypopup")){
anchor.onclick = function () {openHeyPopup(this); return false;}
}
}
}
function addLoadEvent(func)
{
var oldonload = window.onload;
if (typeof window.onload != 'function'){
     window.onload = func;
} else {
window.onload = function(){
oldonload();
func();
}
}
}
addLoadEvent(initHeyPopup);

</script>

Das Skript kann natürlich den eigene Vorstellungen angepasst und ergänzt werden. Schön wären zum Beispiel Variablen für die einzelnen Optionen des window.open-Objectes.
[Download Script und Beispiel]

3 Kommentare

  1. Alleinig um „valide zu poppen“ find ich das nen argen Overhead. Ok, die Verwendung des rel Attributs dafür ist echt sehr sehr „sauber“. Wenn’s schnell und einfach gehen soll, mach ich folgendes (hier mal als Beispiel):

    hier geht es lang

    Jetzt könnte man das noch in eine ordentliche Funktion packen und fertig ist die Laube.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.

DSGVO Cookie Consent mit Real Cookie Banner