Popups
Böse, böse Popups
Es gibt 2 open() Methoden:
Die erste window.open() öffnet ein neues Browserfenster,
die zweite document.open() überschreibt dynamisch den Seiteninhalt.
Popups beim Verlassen der Seite, Popups mit obszöner Werbung beim Überfahren eines unscheinbaren Links, Popups bei jeder Gelegenheit, haben dazu geführt, dass die meisten Browser (via Popup Blocker Plugin) den Usern die Möglichkeit geben, Popups zu blockieren und die Ausführung von JavaScript ganz zu verhindern. Möchte ich also mit Popups Inhalte vermitteln, muss absolut gewährleistet sein, dass ich das persönliche Vertrauen des Users besitze, oder meine Popup-Inhalte werden ausgeschlossen und die User verlassen meine Site fluchtartig.
Popup ein Bild
Wird über ein HTML Link mit target="_blank" eine (Bild-)Datei angesprochen,
öffnet sich diese zwar in einem eigenen Fenster, dies gilt jedoch nicht als Popup.
Je nach Browser öffnet sich ein neues Browserfenster (IE) oder ein neuer Tab (FF).
Das Browserfester oder der Tab hat dann die gleiche Grösse, wie das Ausgangsfenster,
oben und links wird eine Margin vorgegeben und der weisse Hintergrund erstreckt sich,
je nach Bildgrösse, rechts und unten bis zum weit entfernten Browserrand.
Zudem zeigt das Browserfenster oben sämtliche unästetischen Menü- und Linkleisten.
>> Cloe Zur Erinnerung:
<a href="images/cloe.jpg" target="_blank">>> Cloe</a>
Hingegen kann mit einem Javascript Popup bestimmt werden:
der Fenstername, die Breite und Höhe des Fensters (welche mit den Bildmassen übereinstimmen kann),
es kann das Verändern der Fenstergrösse unterbunden werden (FF nicht mehr, IE jetz noch),
der Abstand der oberen, linken Fensterecke zum Bildschhirmrand kann festgelegt werden (Masse in Px erfolgt ohne Sortenangabe),
und wenn nichts weiter angegeben wird, werden auch keine Menü- und andere Balken (ausser im FF die Adresszeile und Statusleiste) dargestellt.
window.open()
<a href="#" onmouseover="window.open('window_popup_img.html','popgirlfenster',
'width=400,height=600,top=50,left=200,resizable=no');">>> Popup das Bild</a>
Manchmal sieht man auch: window.open('url' ,'name', config='height=300,width=300')
config Features sind Befehls-Parameter und gelten als Sub-Kommandanten, mehrere solche Unterbefehle trennt man durch Kommas,ohneLehrschläge wie oben bei den Grössenangaben.
Wo aber ist das Bild? Es ist Bestandteil der geladenen HTML-Datei (das Javascript öffnet nicht direkt das Bild, sondern eine Datei welche das Bild enthält). In der dortigen Datei können zusätzlich die Margins auf 0 geschaltet werden!
>> Popup das Bild (Nicht klicken - nur berühren.)
Popup Diashow
Eine Funktion mit dem Namen 'BildFenster' erwartet als Parameter eine Variable 'BildDatei'
die Variable 'slide' öffnet das Fenster-Objekt mit den Parametern des Fensters:
der Inhalt des Fensters liegt in der Variablen 'BildDatei', der Name des Fensters ist 'HobbyBilder',
Lage und Masse des Fensters werden festgelegt, es wird versucht alle Zeilen und den Balken explizit wegzulassen und die Grössenänderung zu unterbinden.
Die Methode focus() bringt das Fenster sofort wieder nach vorne, auch wenn zur Betätigung der Bild-Links in das Mutterfenster geklickt wird.
Weil das Script immer das Fenster mit dem gleichen Namen öffnet, entstehen keine neuen Popups, sondern das erste wird überschrieben.
Die Abstände links und oben zum Rand lassen sich leider nicht auf 0 setzen,
darum ist das Fenster in der Höhe 30, in der Breite 20 Pixel grösser als die Bilder.
Als Link-Pics dienen die originalen, grossen Bilder, welche so schon vorgeladen werden, damit braucht es keine Preloads mehr.
<script type="text/javascript">
function BildFenster(BildDatei) { // erwartet irgendeinbild.jpg
slide=window.open(BildDatei,"HobbyBilder",
"location=no,menubar=no, scrollbar=no,toolbar=no,top=0,left=400,width=370,height=530,resizable=no")
slide.focus()
}
</script>
So ein Link zum Aufruf des Scripts sieht so aus:
<a href="JavaScript:BildFenster('images/hobby_mikroskop.jpg')"><img src='images/hobby_mikroskop.jpg' alt="" height="100" width="70" border="0"></a>
(click)
)
)
)
Popup Infotext schreiben
info.opener =
Die Eigenschaft opener weiss von welchem Fenster aus ein Popup geöffnet wurde.
<script type="text/javascript">
function InfoFenster(infoText){ // erwartet infoTexte
self.name = "beschreibung";
info = window.open ('','InfoFenster','left=400,top=110,width=100,height=100');
if(info != null){
if(info.opener == null){
info.opener = self;
}
}
info.document.clear();
info.document.open();
info.document.write("INFO ");
info.document.write("");
info.document.write("");
info.document.write(infoText);
info.document.write("");
info.document.close();
return true;
}
function fensterzu(){
info.close();
return true;
}
</script>
So ein Link zum Aufruf des Scripts sieht so aus:
<a href = "test_danke.htm" onmouseover = "InfoFenster('Alle sind gerade ich.')" onmouseout = "fensterzu()">Wieso gerade ich?</a>
(over and out)
Solche Info-Dinger werden jetzt besser mittels div-Containern und DHTML erzeugt, vor allem der Fensterrahmen stört, aber als Javascript Lernstück taugt es allemal. Der Vorteil gegenüber den Alert Fenster ist die eigene Gestaltung und das Schliessen bei onMouseout.
Popups fokusieren und schliessen (Fernbedienung)
<script type="text/javascript">
function nocheinpopup(url) { // verschiedene url erwarten
popUp=window.open(url,'popup-page','width=400,height=500,top=100,left=400')
},
</script>
close() funktioniert überhaupt nur, wenn das Fenster als Javascript Popup generiert wurde! Eigentlich kann ein Fenster ja über das x geschlossen werden.
Am besten lässt sich ein Popup manipulieren, wenn es in einer Variablen (im obigen Beispiel: 'popUp' gespeichert ist.)
Um mehrere Popups mit je unterschiedlicher url zu generieren empfielt sich eine Funktion.
close()
>> öffnet Popup mit eingebauten Schliess-Links
<a href="JavaScript:nocheinpopup('window_poper_close.html')">...<a>
>> holt Popup in den Vordergrund
<a href="JavaScript:popUp.focus()">...<a>
>> schliesst Popup direkt von hier aus
<a href="JavaScript:popUp.close()">...<a>
>> öffnet Popup welches sich nach einiger Zeit im Off schliesst
<a href="JavaScript:nocheinpopup('window_poper_close-omblur.html')">...<a>
Die Popupseiten müssen im body-Tag die focus() Methode anwenden, sonst können sie nur einmal aufgerufen werden:
<body onLoad=self.focus()>
Popup platzieren
>> öffnet das Popup zur Manipulation
moveTo()
>> zentriert das Popup in der Bildschirmmitte
<a href="JavaScript:popUp.focus();popUp.moveTo((screen.width/2)-200,(screen.height/2)-300);">...<a>
Das Popup wird in den Vordergrund geholt. Dann wird es verschoben zur Bildschirmmitte,
das ist die halbe Bildschirmbreite - 200 (halbe Popupbreite), weil die Position der linken, obere Ecke angegeben wird.
Mit der Höhe wird gleich verfahren. Der Name der Popupvariablen ist popUP.
>> platziert das Popup oben links
<a href="JavaScript:popUp.focus();popUp.moveTo(0,0);">...<a>
Das Popup wird in den Vordergrund geholt. Dann wird es verschoben mit der linken, oberen Fensterecke zur linken, oberen Bildschirmecke (0,0).
moveBy()
>> repositioniert das Popup um 20px
<a href="JavaScript:popUp.focus();popUp.moveBy(20,20);">...<a>
Das Popup wird in den Vordergrund geholt. Dann wird es auf jeder Achse um 20px repositioniert.
Diese Seite validiert nicht w3c konform
Check den Code.