Version
Aktuelle Version: BETA (2006/11/20) - inlinepopup.zip (10,7 KB)
In Opera funktioniert das Drag&Drop noch nicht flimmerfrei, das Resizing des Popup-Fensters ist noch besonders unschön.
Diese Datei wurde mit dem kostenlosen OpenSource-Programm 7-zip erstellt, dessen Einsatz ich beim Entpacken sehr empfehle (andere ZIP-Mechanismen haben anscheinend Probleme mit dieser Datei).
Demo
Beispiel gefällig? (Öffnet mein Gästebuch in einem "Inline Popup")
Oder vielleicht Google im Fenster?
Features
Dieses Javascript erzeugt Pseudofenster innerhalb einer Seite, in denen man andere Webseiten anzeigen lassen kann.
Da durch Popups neu erzeugte Browserfenster in der Regel sehr störend sein können, außerdem manchmal durch Popup-Blocker auch noch verhindert werden (was manche Seitenfunktionen regelrecht zerstört), kann ein solches Inline-Popup sehr sinnvoll sein.
Die Pseudofenster lassen sich verschieben und über eine Schaltfläche wieder schließen. Falls das beim Aufruf des Popups so gewünscht war, lassen sie sich in ihrer Größe auch ändern.
Integration
Dieses Script zu nutzen setzt ein wenig Kenntnisse in Javascript voraus, da es etwas komplexer ist.
Script-Datei einbinden
Im Dokument muss an irgendeiner Stelle das Script auf herkömmliche Weise eingebunden werden.
<script src="{pfad}/inlinepopup/inlinepopup.js" type="text/javascript"></script>
Ab sofort ist ein Objekt namens InlinePopup verfügbar, welches (unter anderem) die Methoden open() und close() hat. Deren Benutzung wird nun erklärt.
Fenster per Javascript öffnen
Die bisherige Vorgehensweise, Fenster per window.open() zu erzeugen, kann man nun durch InlinePopup.open() ersetzen. Der Methodenaufruf ist an sich identisch.
var meinFenster = InlinePopup.open({URL}, "Fenstername", "{Parameter}");
Anstatt nun ein neues Browserfenster (oder Tab) zu öffnen wird jetzt ein DIV-Element erzeugt, in welchem das neue Dokument in einem Iframe angezeigt wird. Wenn als Fenstername eine leere Zeichenkette angegeben wurde (oder ein Popup dieses Namens bereits existiert), so wird ein interner Fenstername vergeben.
Als Rückgabewert liefert die Methode das window-Objekt des Iframes, so wie es die Methode window.open() bei einem neuen Browserfenster/Tab auch tun würde.
Als Parameter im dritten Wert werden umgesetzt:
- resizable=yes|no
- statusbar=yes|no
- top={numerischer Wert}
- left={numerischer Wert}
- width={numerischer Wert}
- height={numerischer Wert}
Fenster per Javascript schließen
In einem Iframe ist die Methode window.close() oder gar self.close() natürlich nutzlos, da das Eltern-Frame darüber nicht geschlossen werden kann. Daher muss aus dem Iframe die Methode close() des Objektes InlinePopup aus dem Eltern-Frame aufgerufen werden. Als Parameter braucht diese Methode den Namen des Iframes, da dieser zugleich die ID des umgebenden DIV-Elementes ist.
Um diesen Prozess zu vereinfachen existiert ein weiteres einbindbares Script inlinepopup_close.js, welches man im Dokument der zu ladenden Seite einbinden kann und welches die Methode window.close() entsprechend erweitert. Damit kann der bisherige Code in diesem Dokument unverändert bleiben.
Sonstiges
Ich freue mich, wenn mein Script für jemanden nützlich ist. Daher sind E-Mails diesbezüglich immer willkommen. Auch für Verbesserungsvorschläge habe ich ein offenes Ohr, da ich auch ständig dazulerne und meine Scripte gerne besser und sicherer mache.