Beispiele: Fenster und Frames in JavaScript

Eine der meistgenutzen JavaScript -Funktionen ist die ein Fenster, sogenanntes Popup, zu öffnen. Doch JavaScript kann mit Fenstern weitaus mehr anfangen. Was möglich ist, zeigen wir Ihnen hier.

Mehrere Frames gleichzeitig ändern

Ein oft in diversen Foren gefragtes Thema zu JavaScript ist der Wechsel von mehreren Frames gleichzeitig. Nehmen wir an, sie haben ein Frameset mit drei Frames Hauptseite, Navigation und Ueberschrift. Klickt der Besucher im Naviagtions-Frame auf einen Link, soll sich natürlich zum einen die Hauptseite ändern - zum anderen soll sich aber auch die Ueberschrift ändern. JavaScript kann hier helfen. Der Zugriff auf einen Frame erfolgt in JavaScript über das parent- oder top-Objekt bzw. über window.frames. Sollen zwei Frames gleichzeitig geändert werden, verwenden wir das onclick-Ereignis und weisen ihm eine Funktion (hier Wechsle) zu. Damit nicht für jeden Link eine neue Funktion geschrieben werden muss, übergeben wir der Funktion die zwei zu ladenden URL's. Hier ein Beispielskript:

function Wechsle(a,b)
{
top['Hauptseite'].document.location.href = a;
top['Ueberschrift'].document.location.href = b;
}

Das Skript kommt in den head-Bereich der Seite, in der auf die Links geklickt wird (also die Navigation). Der Aufruf kann dann z.B. so erfolgen:

<a href="#" onclick="Wechsle('seite1.html','uebers1.html')">
Seite 1
</a>

PopUp-Fenster erzeugen

Jeder kennt sie, die meisten hassen sie: PopUp-Fenster. Kleine oder große Fensterchen, die immer dann aufpoppen, wenn man eine Seite besucht und die uns dann über die neuen Errungenschaften der Konsumwelt berichten. Auch Ihre Homepage kann sowas bekommen.
Ein Popup ist nichts weiter als ein neues Browserfenster. Ein Browserfenster wird mit der window.open-Methode geöffnet. Als Parameter erwartet die Methode eine URL, als zweites einen Fensternamen und als drittes kann optional ein String angegeben werden, der das Aussehen des Fensters beschreibt. Der Fensternamen ist frei wählbar. Der folgende Code öffnet beim Laden der Seite ein neues Fenster der Größe 480x120 (entspricht etwa Bannergröße):

<html>
<head>
<title>PupUp</title>
<script type="text/javascript">

</script>
</head>
<body onload="PopUp()"> ... </body>
</html>

Ein Fenster bewegen

Manchmal kann es wichtig sein ein Fenster zu bewegen. Auch das geht mit JavaScript . Alles was hierfür notwendig ist, ist die Methode moveTo bzw. moveBy des window-Objekts. moveTo verschiebt das Browserfenster auf einen festen Punkt im Koordinatensystem des Bildschirms. moveBy verschiebt das Browserfenster um einen bestimmten Weg relativ zur vorherigen Position. Beide erwarten zwei Werte: Eine x- und eine y-Koordinate. Beispiel:

<html>
<head>
<title>Fenster schieben</title>
<script type="text/javascript">

</script>
</head>
<body>
<a href="#" onclick="schiebe()">Schieb mich</a>
</body>
</html>

Das Beispiel definiert eine Funktion schiebe. Sie enthält eine for-Schleife die von 100 bis 199 zählt. Innerhalb der Schleife wird bei jedem Durchlauf ein Timeout erstellt, der das Fenster auf die Koordinaten von i setzt. Letztlich ergibt sich so, dass sich das Fenster von [100x100] auf [199x199] verschiebt.
Bitte beachten Sie, dass diese Technik nicht unproblematisch ist und auch uneinheitlich wirkt. Beim Internet Explorer lässt sich das Hauptfenster z.B. nicht mehr zurückbewegen, und je nach Größe kann es sein, dass das Fenster über den Bildschirmrand bewegt wird und nicht mehr ganz sichtbar ist. Bei tab-basierten Browsern, etwa der Gecko-Familie, wird dagegen nur so weit verschoben, dass das Fenster in jedem Fall noch in den Bildschirm passt. Im Vollbildmodus wird dann jedoch gar nichts verschoben.

Den Fenstertitel ändern

Der Fenstertitel eignet sich besonders um dort Informationen anzuzeigen. Mit JavaScript kann man hier eingreifen und den Titel ändern. Alles was man dazu braucht ist die document.title-Eigenschaft. Als Wert wird einfach der String übergeben, der angezeigt werden soll:

window.setTimeout('document.title = "Willkommen bei mir"',1000);
window.setTimeout('document.title = "Es erwarten Sie:"',2000);
window.setTimeout('document.title = "Aktuelle News"',3000);
window.setTimeout('document.title = "Freizeitangebote"',4000);
window.setTimeout('document.title = "Modelleisenbahnen"',5000);
window.setTimeout('document.title = "Basteltips"',6000);
// ...

Das ganze kommt dann einfach in den head-Bereich und zeigt im Abstand von 1 Sekunde die jeweiligen Texte an:

Darstellung: Die geänderte Titelleiste

Informationen in der Statusleiste

Ebenso wie man die Titelleiste zum Anzeigen von Nachrichten verwenden kann, ist auch die Statusleiste (window.status) ein gern genutzter Werbeplatz. Hier können z.B. Informationen zu den Link angezeigt werden, über dem sich gerade die Maus befindet:

<a onmousemove="window.status='Modelleisenbahnen'"
onmouseout="window.status='Hallo'"
href="modelle.htm">Modelleisenbahnen</a>

Bitte beachten Sie, dass es zwar ein "netter" Effekt ist, sich jedoch die Besucher daran gestört fühlen könnten, wenn sie in der Statusleiste nicht wie gewohnt die Zieladresse wiederfinden. Evtl. wäre es hier zu empfehlen diese Zusatzinformationen mittels <a title="Zusatzinfos" ...> ... </a> an den Mann zu bringen.

Automatische Weiterleitung

Manchmal ist es aber auch nützlich, je nach Browser oder Auflösung eine andere Seite anzuzeigen. Alles was dazu getan werden muss, ist eine neue Seite zu laden. Dies geschieht indem der location.href-Eigenschaft ein neuer Wert übergeben wird:

w = screen.width;
if(w <= 800){location.href = 'kleineseite.html';}
else if(w <= 1024){location.href = 'mittlereseite.html';}
else{location.href = 'grosseseite.html';}

Das Beispielskript gehört in den head-Bereich und leitet - je nach Auflösung - auf eine kleine, mittelgroße oder große Seite weiter. Der Besucher bekommt im Allgemeinen davon nichts mit und sieht dann nur die für seinen Bildschirm angepaßte Seite.

Aufruf in fremden Frameset verhindern

Das Problem ist folgendes: Eine fremde Seite erstellt ein Frameset und lädt Ihre Inhalte darin. Da das nicht nett ist, sollte man sich schützen. Abhilfe schafft hier JavaScript . Das Prinzip ist folgendes: Sofern ein Frameset existiert, sollte dieses von jeder Seite aus über das top-Objekt erreichbar sein. Für dieses Frameset können wir über top.location.host feststellen, ob es sich um eines von uns oder ein fremdes Frameset handelt. Ist es ein fremdes, wollen wir eine Nachricht anzeigen und auf unsere Seite weiterleiten, sodass das Frameset entfernt wird. Das ganze könnte z.B. so aussehen:

if
(top.location.host.toLowerCase().indexOf('meinedomain.de')==-1)
{
  alert('Sie betrachten diese Seite von einem fremden Frameset '+
        'aus. Klicken Sie auf OK und Sie werden zur '+
        'Orginalseite weitergeleitet.');
  top.location.href = 'http://www.meinedomain.de';
}

Wenn Sie über mehrere Domains verfügen, die auf die gleiche Seite verweisen, sollten Sie die Abfrage etwas erweitern um unnötige Weiterleitungen vorzubeugen:

if(
   top.location.host.toLowerCase().indexOf('meinedomain1.de')==-1
   &&
   top.location.host.toLowerCase().indexOf('meinedomain2.de')==-1
  )
{
  alert('Sie betrachten diese Seite von einem fremden Frameset '+
        'aus. Klicken Sie auf OK und Sie werden zur '+
        'Orginalseite weitergeleitet.');
  top.location.href = 'http://www.meinedomain1.de';
}

Packen Sie dieses Skript in eine externe Datei und fügen Sie es in alle betreffenden Seiten ein - so sparen Sie Speicherplatz und verhindern, dass fremde Framesets Ihre Seiten laden.

Ein Frameset nachladen

Durch Suchmaschinen kommen immer wieder Besucher auf ihre Seiten. Haben Sie hier ein Frameset verwendet, dann ist das meist nicht zu sehen, da sie Suchmaschinen direkt auf die Unterseiten verlinken und nicht auf das Frameset selbst. Dem kann aber Abhilfe geschaffen werden.
In jeder Unterseite des Framesets benötigen Sie dazu das folgende Skript:

if(self == top)
{window.location.href = 'frame.htm?'+self.location.href;};

... es prüft, ob ein Frameset geladen wurde oder nicht. Wurde kein Frameset geladen, wird auf die Seite frame.htm (stellt hier das Frameset dar) weiter geleitet. DerURLwird außerdem die ursprünglich aufgerufene Seite angehängt.
Bisher würde nun nichts weiter getan werden, als dass auf das Framset weiter geleitet wird, sofern es nicht schon da ist. Damit innerhalb des Framesets nun auch die richtige Seite geladen wird, brauchen wir ein weiteres kleines Skript direkt in der Datei des Framesets (hier frame.htm):

<html>
<head>
<title>Frameset</title>
<script type="text/javascript">

</script>
</head>
<frameset cols="200,*" onload="pruefe()">
<frame src="navi.html" name="Navigation">
<frame src="start.html" name="Inhalt">
</frameset>
</html>

Das Skript ließt den über die URL übergebenen String aus und lädt die entsprechende Datei in den Frame Inhalt.

Daten an die nächste Seite weitergeben

Nehmen wir an Sie haben ein Anmeldeformular, das aus mehreren Seiten besteht: Allgemeine Eingaben, Statistische Angaben und als dritte Seite die Anmeldebestätigung. Auf der ersten Seite gibt der Benutzer seinen Namen an, aber wie soll die zweite und dritte Seite an diesen Namen kommen um den Besucher persönlich ansprechen zu können? Für dieses Problem gibt es mehrere Lösungsmöglichkeiten:

Daten per Cookies übergeben

Alle nötigen Daten werden in Cookies gespeichert und in den Folgeseiten jeweils wieder ausgelesen und ggf. ergänzt. Da auf Cookies in einem späteren Abschnitt noch näher eingegangen wird, wollen wir uns hier nicht mit dieser Variante beschäftigen - es sein nur zur Theorie gesagt, dass man es auch so machen könnte.

Daten per URL übergeben

Die Daten werden über die URL übergeben. Sofern ein Formular ausgefüllt wird, muss dieses sicher abgeschickt werden um auf die nächste Seite zu gelangen. Mit JavaScript können wir die in derURLübergebenen Daten wieder auslesen und weiter verarbeiten.
Dazu sollten wir uns vor Augen führen, wie eine solcheURLaufgebaut ist. Als erstes kommt standardmäßig die Adresse der aufgerufenen Seite. Anschließend folgt ein Fragezeichen, welches Adresse und Formulardaten trennt. Letztlich folgen die Formulardaten jeweils in Name-Wert-Paaren. Jedes Paar wird durch ein Kaufmanns-Und (&) abgetrennt und besteht jeweils aus dem Namen des Eingabefeldes, einem Gleichheitszeichen und dem Wert.
Mit JavaScript können wir über die location.search-Eigenschaft auf den letzten Teil derURLzugreifen (alles ab dem ?). Um die einzelnen Werte der Felder heraus zu bekommen kann dann folgendes Skript verwendet werden:

Die Funktion erwartet einen String als Parameter. Sie liest nacheinander alle Name-Wert-Paare derURLaus und vergleicht den Namen mit dem übergebenen String. Wurde der entsprechende Eintrag gefunden, so wird der dazugehörige Wert ausgegeben.
Wurde auf der ersten Seite z.B. der Name in das Feld mit dem Namen Benutzername eingegeben und abgesendet, kann die Funktion auf der entsprechenden nächsten Seite eingesetzt werden. Der Aufruf BekommeWert('Benutzername') gibt dann den entsprechenden Eintrag wieder, der weiter verwendet werden kann.
Hinweis: Da z.B. Sonderzeichen beim Übertragen in CGI-Werte umgewandelt werden (ähnlich der Sonderzeichen in HTML) muss hier die unescape-Funktion verwendet werden. Sie wandelt die CGI-Syntax wieder in "normale" Zeichen um.

Tip: Das Formular sollte natürlich per HTTP GET-Methode versandt werden, da bei POST die Daten nicht in derURLübermittelt werden.

Das Dokument neu schreiben

Ein Grundlegendes Feature von JavaScript ist bekanntlich der Zugriff auf das aktuelle Dokument. Aber nicht nur der Zugriff auf bereits existierendes kann mit JavaScript realisiert werden, sondern auch das komplette neu Schreiben eines Dokumentes oder das Einfügen von Code während des Seitenaufbaus.
Das document-Objekt stellt uns dazu die vier Methoden open, write, writeln und close zur Verfügung mit denen das aktuelle Dokument geöffnet, geschrieben und anschließend wieder geschlossen werden kann.

Das Dokument komplett neu Schreiben

Soll ein Dokument komplett neu geschrieben werden nachdem es vollständig angezeigt wurde, muss es zunächst geöffnet werden. Dies geschieht mit der oben genannten open-Methode. Ist das Dokument geöffnet, kann mit den Methoden write und writeln neuer Code hinein geschrieben werden. Aber Vorsicht: Wird das Dokument nach dem vollständigen Laden geöffnet, so wird der gesamte Inhalt des Dokumentes entfernt - es kann also nicht nachträglich neuer Inhalt eingefügt werden.
Der Unterschied zwischen den Methoden write und writeln liegt lediglich im Formellen: write schreibt den übergebenen Text so wie er ist in die Anzeige, wohingegen writeln den Text zeilenweise in die Anzeige schreibt. Ist der Schreibvorgang beendet, muss das geöffnete Dokument mit der close-Methode geschlossen werden - erst dann wird das neu geschriebene vom Browser angezeigt. Beispiel:

function schreibe()
{
document.open();
document.write('<html><head><title>Neue Seite</title></head>');
document.write('<body>');
document.write('<p>Hier zeigt sich der Unterschied zwischen ');
document.write('write und writeln:</p>');
document.write('<pre>');
document.write('Während der Text von write nacheinander');
document.write(' ausgegeben wird, ');
document.writeln('wird der Text von writeln');
document.writeln(' in');
document.writeln(' einzelne');
document.writeln(' Zeilen');
document.writeln('gesetzt!');
document.write('</pre>');
document.write('</body></html>');
document.close();
}

Das Dokument beim Laden ändern

Ein gewisser Unterschied besteht, wenn das Dokument gerade geladen wird, also z.B. wenn innerhalb eines script-Blocks die write/writeln-Methode verwendet wird. Ist die Seite noch nicht vollständig geladen kann in das Dokument selbst geschrieben werden - es können also Ergänzungen eingefügt werden. Hierzu braucht das Dokument nicht geöffnet und geschlossen werden. Beispiel:

<html>
<head>
<title>Dokument beim Laden ändern</title>
</head>
<body >
<script type="text/javascript">

</script>
</body>
</html>

Arbeiten in mehreren Windows gleichzeitig

Einer der großen Vorteile von Online Communication gegenüber der bisher üblichen, papiergebundenen Kommunikation ist, dass man hier auf mehreren Ebenen gleichzeitig arbeiten kann - ohne dem Benutzer irgendetwas "aufs Auge zu drücken". Eine einfache Technik dazu ist es, mehrere Windows gleichzeitig zu benutzen. Und wie tut man das? - dazu gibt es eine ganze Zahl von Methoden.
Am Bildschirm kann man dem "Leser" (ist das hier eigentlich noch das richtige Wort?) Informationen in mehreren Windows anbieten - und es dem Benutzer überlassen, was davon er/sie sehen will; was davon zeitweilig in der Taskleiste untergebracht wird, um später wieder hervorgeholt zu werden; usw.
Das Einfachste ist, ein leeres Window zu erzeugen. Dabei sollten wir auch gleich die Referenz zu dem neuen Window (wnd) speichern - diese werden wir später immer wieder brauchen:

wnd = open();

Falls wir das neue Window gleich mit dem Inhalt irgendeines Files füllen wollen, können wir dessen vollständigen Pfad+Namen als Parameter (...) mitgeben:

wnd = open("...");

Falls Sie dieses neue Window als TARGET in einem Link ansprechen wollen, sollten Sie als zweiten Parameter einen Namen dafür angeben. (Meist aber wird der zweite Parameter leer bleiben.):

wnd = open("...",target);

Bisher wurde das neue Window einfach über das erste Window gelegt, im gleichen Layout wie dieses. Oft aber wird es sinnvoll sein, das neue Window in einem anderen Layout zu erzeugen, z.B.:

wnd = open("...",'','width=600,height=400');

Ein solches Window taucht in der linken oberen Ecke des Bildschirms auf mit den gewünschten Abmessungen. Bis auf die Titelzeile ist nun alles verschwunden: keine Menubar, keine Toolbar, keine Statusbar. (Diese müsste man nebst width und height eigens verlangen, z.B. menubar=yes oder menubar=1)
Ein solches Window ohne Menubar hat den Vorteil, dass der Benutzer den Inhalt nicht mehr herunterladen kann - ist also nützlich für die Datensicherung, schier ein ewiges Problem bei der Einrichtung einer Website. (Allerdings sollte man dann noch einige andere Dinge nicht vergessen - doch das wäre gleich wieder ein Artikel für sich!)
Im Windows-Standard trägt ein leeres Window den nichtssagenden Titel about:blank. Ihm einen anderen Titel geben können Sie mit

wnd.document.title="Neuer Titel";

Vielleicht gefällt es Ihnen nicht, wenn hier ein kleines Window oben in der Ecke klebt. Gut - dann verschieben Sie es, z.B.:

wnd.moveTo(400,300);

Das bedeutet nicht, dass es nun für immer dort liegen bleiben muss. Der Benutzer kann es jederzeit verschieben (oder minimieren bzw. schließen), wenn er/sie z.B. den dadurch verdeckten Text sehen will.
Diesen Umstand können wir Programmierer gleich wieder zu unserem Vorteil nutzen: Wenn wir ein Window mitten im Bildschirm platzieren, wird es dem Benutzer wahrscheinlich bald im Weg sein und er wird es zur Seite verschieben. Dabei aber wird er/sie es jedenfalls bemerken - und das wollten wir ja erreichen!
Wenn Sie das neue Window zunächst leer gestartet haben (z.B. wnd = open('','','width=600, height=400'); ), dann müssen Sie es nun mit dem gewünschten Inhalt füllen. Am einfachsten geht das, indem Sie diesen Inhalt einfach hard-coded (aber unsichtbar!) im ersten Window vorbereiten, z.B.:

Diesen Inhalt können Sie dann ganz einfach in das neue Window exportieren, z.B.:

wnd.document.body.insertAdjacentHTML('BeforeEnd',xxx.outerHTML);

Vergessen Sie aber nicht, xxx im neuen Window wieder sichtbar zu machen:

wnd.xxx.style.display = '';

Auch sollten Sie bedenken, dass alle Funktionen nur im ersten Window definiert sind. Wenn Sie also dem Benutzer irgendeine Interaktivität im neuen Window einräumen wollen, dann sollten alle Funktionen mit dem Prefix opener. versehen sein. Gibt es im neuen Window z.B. einen Link, der eine Funktion im ersten Window aufruft, dann könnten Sie das so machen:

Vielleicht wollen Sie zwischendurch mal das neue Window in die Taskleiste minimieren. Das können Sie mit:

wnd.blur();

Um ein minimiertes Window wieder auf den Bildschirm zu bringen, genügt:

wnd.focus();

Und so gibt es noch zahlreiche Dinge, die Sie mit dem neuen Window tun können - mehr als hier sinnvoll besprochen werden kann. Sehen Sie dazu bitte in der JavaScript -Dokumentation von Windows nach.
Irgendwann einmal wird das neue Window seine Aufgabe erledigt haben, und Sie wollen es wieder löschen. Das können Sie ganz einfach tun mit:

wnd.close();

Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.

Über uns

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project

Beispiele: Fenster und Frames in JavaScript

Über uns

Cookie-Einstellungen