Popupfenster
Dragonfly
- javascript
Hi!
In folgendem Beispiel wird ein Popupfenster bestimmter Größe über einen Link geöffnet:
<html>
<head>
<title>Fenster mit JavaScript</title>
<script type="text/javascript">
<!--
function PopupFenster() {
F = window.open("datei.htm","Popup","width=400,height=300");
}
// -->
</script>
</head>
<body>
<p><a href="javascript:PopupFenster()">Fenster anzeigen</a></p>
</body>
</html>
Nun mein Problem:
Ich möchte auf der Page nicht nur einen Link einfügen, bei dem sich diese eine Datei.htm öffnet... sondern mehrere Links mit verschiedenen Popupfenstern... mit verschiednene größen... Wie funktioniert das? Muss ich der Funktion/dem Script einen Namen zuweisen, und bei der Verlinkung <a href="..."> angeben? Oder wie funktioniert das?
Vielleicht ist auch der ganze Ansatz falsch..
Vielen Dank im Voraus
HI Dragonfly,
übergib doch einfach der Funktion Variablen, die den Inhalt und die Groeße angeben!
MFG
Philipp
Also entweder Du gibst deiner Funktion PopUpFenster() den passenden Parameter mit also:
<a href="javascript:PopupFenster(Datei1.htm)">Fenster anzeigen</a>
<a href="javascript:PopupFenster(Datei2.htm)">Fenster anzeigen</a>
usw...
und verarbeitest den dann in Deiner Funktion.Dazu musst Du dann sicherlich mit If-Abfragen den übergebenen Parameter checken, um dann entsprechend unterschiedliche Werte auch bei den Größenangaben hinzubekommen.
Oder Du machst für jedes Fenster eine eigene Funktion, also
<a href="javascript:PopupFenster1()">Fenster anzeigen</a>
<a href="javascript:PopupFenster2()">Fenster anzeigen</a>
usw...
und gibst dann in jeder Funktion separat Deine Werte an.
Hallo,
versuch's mal so:
Sebastian
<html>
<head>
<title>Fenster mit JavaScript</title>
<script type="text/javascript">
<!--
function PopupFenster(w,h)
{
options = 'width='+w+',height='+h;
F = window.open("datei.htm","Popup",options);
}
}
// -->
</script>
</head>
<body>
<p><a href="javascript:PopupFenster(400,300)">Fenster anzeigen</a></p>
</body>
</html>
Vielleicht ist auch der ganze Ansatz falsch..
Eher ja.
Man kann Links auch so definieren, daß sie sowohl mit als auch ohne JavaScript funktionieren. Der obige Ansatz funktioniert nur mit Scripting, nicht ohne.
Auch die Größenangaben sind meist überflüssig, denn Browser oder Betriebssystem haben da meist eine gute Vorseinstellung.
Beispiele:
<a href="datei1.htm" target="_blank" onClick="open('datei1.htm','_blank','resizable=true,scrollbars=true');return false">Datei 1</a>
<a href="datei2.htm" target="_blank" onClick="open('datei2.htm','_blank','resizable=true,scrollbars=true,width=640,height=480');return false">Datei 2</a>
<a href="datei3.htm" target="_blank" onClick="open(this.href,this.target,'resizable=true,scrollbars=true');return false">Datei 3</a>
Es wird ein normaler HTML-Link (mit target="_blank") definiert, der dann um den onClick-Eventhandler erweitert wird. Dieser ruft das Fenster mit JavaScript auf und bricht den normalen Link ab (";return false"). Wenn Scripting deaktiviert ist, fällt der Eventhandler flach und stattdessen wird der normale HTML-Link ausgeführt (deshalb target="_blank").
Das erste Beispiel verzichtet auf die Größenangabe und überläßt es dem System.
Das zweite Beispiel macht feste Größenangaben.
Das dritte Beispiel verzichtet auf die doppelte Angabe von Datei und Target und ist daher einfacher zu warten bzw. die HTML-Seite ist einfacher um weitere Links zu ergänzen, man kann nicht so leicht eine Angabe vergessen und somit unterschiedliche Dateien angeben. Funktioniert allerdings nicht mit Browserversionen 3.0, die kennen die Angabe this im Link nicht. Allerdings existieren diese Browser wohl nur noch, um Browserkompatiblität zu testen und wohl nicht mehr, um damit zu surfen (meiner Meinung nach).
Bei kleinen Dokumenten erzeugt der IE eine leere Scrollbar rechts, dies läßt sich im aufgerufenen Dokument mit
<body scroll="auto">
abstellen.
Generell sollte man immer Scrollbars und Resizable erlauben, da der Anwender im Browser die Standardschriftgröße leicht ändern kann (MSIE: Menü Ansicht Schriftgrad) und die Darstellung bei jedem unterschiedlich viel Platz beansprucht. Vorsicht Tippfehlergefahr: resizable kommt zwar von resize, aber man hängt nicht nur das "able" an, man läßt auch das "e" weg. Es heißt also nicht resizeable, sondern resizable.
Interessant auch mal, F11 im PopUp zu drücken. Oder gleich jetzt einmal. F11=Vollbildmodus (IE, Opera). Im PopUp wird auch der Leisten-Status getauscht (an/aus). Allderdings überschreiben sie dann manchmal den obersten Text.
Anmerkungen: bei AGB's sollte man auch
,menubar=yes
verwenden, damit diese Ausgedruckt werden können.
Der IE unterstützt
,fullscreen=yes
(Vollbild, sogar ohne Titel und Schließbuttons), dann sollte man im aufgerufenen Dokument einen Schließlink einfügen:
<a href="javascript:self.close()">SCHLIESSEN</a>