Multimediakurs Leinfelder: Inhalt/A: Einsteiger/Modul 3 "Frames und iFrames"/Modul 3.1.3 "Verlassen von Frames"
(© copyright)     Letzte Änderungen:30.03.2003


Modul 3.1.3: Fortsetzung: Verwendung von Frames für Webseiten - Einführung in die Syntax von Frames

(3. von 4 Seiten) Verlassen von Frames, Benamung und Ansteuern von Fenstern

Position innerhalb des Kurses

Öffnen eines neuen Fensters:

Wir bleiben bei unserem Beispiel. Es könnte ja sein, dass wir auf unserer Webseite auf ein externes Angebot verlinken, z.B. zum Angebot des Rechenzentrums. Wir könnten deshalb einen Link auf Seite inhalt.html im frame frmenu einbauen. Wenn wir nun zum Link wieder target="frhaupt" angeben, wird auch diese Seite wieder im entsprechenden frame geladen. Dies wollen wir aber nicht, da wir ja die Seite nicht erstellt haben und sie auch viel zu klein dargestellt würde.

Wichtiger rechtlicher Hinweis: selbst wenn Sie wollten, dass diese Seite eines anderen Anbieters in ihrem Frame "gefangen" wird, dürfen Sie dies nicht tun. Sie würden damit vortäuschen, dass diese Seite des Rechenzentrums eine Seite Ihres eigenen Angebots ist. Es gibt entsprechende Rechtsurteile, dies derartiges Vorgehen bereits mit empfindlichen Strafen belegt haben. Anfänger, also aufgepasst, damit Ihnen derartiges nicht versehentlich passiert. Lesen Sie deshalb das Nachfolgende genau durch, denn Unwissenheit schützt vor Strafe nicht.

Hinweis: Wenn Sie sich Ihren Domain-Namen bei einem Standard-Provider besorgt haben (z.B. auch palaeo.de, riffe.de, allgemein: meinname.de), könnte es sein, dass Ihrer Links auf externe Webseiten immer noch unter Ihrer Domain (also z.B. meinname.de) aufgerufen werden, d.h. Ihr Domainname in der Adressleiste nicht verschwindet und die aufgerufenen externen Angebote als Fenstertitel noch den Ihrer Domain hatten. Hier handelt es sich um einen sog. versteckten Frame Ihres Providers. Tritt dieses Problem auf, müssen Sie zu allen externen Links den Zusatz target="_top" einfügen. Näheres finden Sie in Anlage 13b). Zum a-tag-Parameter target=_"top" finden Sie unten Näheres.

Wir haben nun in unserem Beispiel zwei Möglichkeiten.

a) wir möchten gerne, dass der Benutzer unser Angebot nicht komplett verlässt, er soll aber die Möglichkeit haben, auf der Seite des Rechenzentrums etwas zu Einstein nachzusehen. Wir öffnen deshalb ein neues Fenster für ihn, in der die verlinkte Seite dann geladen wird. Nach Benutzung kann er diese Seite ja wieder schließen.

Es soll also wie in der folgenden Abbildung (vgl. Sie ggf. mit der entsprechenen Abbildung im früheren Lektionsteil) ablaufen:

Im frmenu kann man auf der Seite inhalt.html den Link Rechenzentrum anklicken, damit wird folgender URL aufgerufen:

<a href="http://www.rechzentr.de/einstein.html" target="extra">Rechenzentrum</a>. Die Seite einstein.html wird damit in einem zusätzlichen Fenster aufgerufen.

(Hinweis: wäre die Seite einstein.html in Ihrem Projektordner zusammen mit den anderen html-Seiten, könnten Sie dies natürlich genauso erreichen, wenn sie als Link-Code folgenden relativen Link schreiben: <a href="einstein.html target="extra">)

Was ist passiert? Der Sourcecode sieht ja aus, wie bei der Framesteuerung? Warum geht da ein neues Fenster auf?

Nun, ein Frameteil oder ein Fenster mit dem Namen "extra" war noch nicht definiert. Deshalb macht der Browser ein Fenster mit entsprechendem Namen auf (der Namen wird nirgendwo angezeigt) und die Seite dorthinein geladen.

Hierzu vier wichtige Merksätze:

  1. Lässt der Benutzer das Fenster geöffnet und Sie rufen später noch einmal einen Link in ein target="extra" auf, wird die verlinkte Seite genau in dieses (bereits namentlich definierte) Browserfenster geladen und kein neues Browserfenster aufgemacht.

    Test: haben Sie obiges Fenster noch geöffnet? Wenn nein, klicken Sie nochmals auf obenstehenden Link. Danach rufen wir im selben Fenster ne andere Seite auf: Hier klicken.

  2. Der Name "extra" ist von mir beliebig gewählt, sie hätten das ganze auch target="meinneuesfenster" oder target="einsteinistdoof" nennen können. Der Effekt wäre derselbe. Sofern ein derartiges Fenster mit diesem Namen bzw. eine Frameseite mit einem entsprechenden Framenamen nicht definiert (d.h. geöffnet) ist, wird ein neues Browserfenster aufgemacht. Ist es bereits offen, ersetzen die aufgerufenen Seiten die entsprechenden Seiten in diesem Fenster bzw. Frame.

    Test: nachdem Sie das vorhin aufgegangene Fenster wieder geschlossen haben, klicken Sie nochmals auf die beiden letzten Links, diesmal aber ggf. in anderer Reihenfolge. Wieder wird das neue Fenster für beide Seiten genutzt, das es denselben Namen hat. Danach bitte wieder schließen.

  3. Es gibt aber Ausnahmen zur Beliebigkeit der Namensgebung. Hier ist die erste: wenn Sie target="_blank" angeben, wird jedesmal ein neues Fenster aufgemacht, auch wenn Sie dieses stehenlassen würden. Wichtig ist dabei der tiefe Strich (underscore) vor dem blank, also _blank. Dies ist ein reservierter Name.

    Test: wir steuern wieder die obigen Seiten an, diesmal jedesmal in einem Link mit Target="_blank". Auch wenn Sie das erste aufgehende Fenster geöffnet lassen, erscheint der zweite Link in einem neuen Fenster, obwohl er die gleiche Targetbezeichung hat. Klicken Sie auf Link 1 und danach auf Link 2.

    (Hinweis: früher konnte hierfür auch das Target="_new" verwendet werden. Mit neueren Browsern öffnet jedoch nur noch der Parameter _blank ein jeweils neues Fenster)
  4. Neue Fenster können Sie nicht nur von einem Frame aus starten, sondern von jeder beliebigen (also auch ungeframten) Seite. Dazu muss analog oben einfach das Target-Attribut beim Link mit angegeben werden.

    Test: Klicken Sie nochmals hier. Es wird eine Seite in einem neuen Fenster aufgerufen. Darin befindet sich ein Link, der wiederum eine neue Seite aufruft. Schließen Sie nach dem Test beide Seiten.


    Tipp: man kann neue Fenster auch in einer bestimmten Größe und mit bestimmten Merkmalen (z.B. ohne Scrollbalken und ohne Kopfmenus) öffnen. Dies geht aber nur via JavaScript. Wir lernen dies später im Kursteil B.

Ersetzen des Frame-Browser-Fensters

Wir wollen aber nicht grundsätzlich den Desktop des Websurfers mit lauter neuen Fenstern zupflastern, obige Option sollten Sie recht sparsam verwenden (s.u.)

Meist sinnvoller ist es, das Browserfenster mit den Frames komplett zu ersetzen und die neue externe Seite im gleichen Browserfenster aufzurufen, also etwa folgendermaßen:

Dies erreichen wir mit einem weiteren namensreservierten target, nämlich target="_top"

Der entsprechende Link analog oben sähe also folgendermaßen aus:

<a href="http://www.rechzentr.de/einstein.html" target="_top">Rechenzentrum</a>. Die Seite einstein.html wird damit im selben Browser-Fenster aufgerufen und ersetzt die darin befindlichen Framesets.

Hier mal ein Beispiel. Klicken Sie auf diesen Link

Merke:

  1. target="_top" bricht alle Frames und öffnet die aufgerufene Seite im selben Browser-Fenster. Der Name ist reserviert, der underscore vor top ist notwendig
  2. target="_parent" hat in den meisten Fällen den selben Effekt. Es könnte aber sein, dass Frames verschachtelt sind (in unserem Standardbeispiel könnte z.B. in den "frhaupt" eine Seite aufgerufen werden, die ihrerseits wieder aus einem Frameset besteht. Die Verwendung des Linkattributs/parameters target="_parent" verlässt jeweils einen Frame-Seite.

Logisches zum Mitdenken:
Nicht in allen Fällen benötigen Sie das definierte Ziel "target="_top", um Frames zu brechen. Unter bestimmten Umständen können Sie dies auch mit beliebigen Target-Namen erreichen. Kommen Sie drauf, wie?
Nun bleiben wir bei unserem früheren, graphisch dargestellten Beispiel. Wir haben z.B. von einer Seite aus ein neues Fenster aufgemacht, z.B. mit Namen "extra" (also via target="extra"). Dort könnte eine Seite geladen werden, die ihrerseits einen Link auf eine Frameseite aufweist. Wird diese Frameseite dann von dort aufgerufen, befindet sie sich, egal, wie auch die eigentlichen Frames heißen, in einem Browserfenster mit definiertem Namen (nämlich "extra"). Geht von der Frameseite ein Link nach draußen, der die Frames brechen soll, könnte man diesem target="extra" hinzugeben, das hätte in diesem Fall den gleichen Effekt wie target="_new", die Frames würden gebrochen? Verstanden? Sie können das Beispiel ja einfach mal nachbasteln.

Normalerweise wird man einen Frame mit target=_top" oder "_parent" brechen und nicht so wie oben im "Kleingedruckten" beschrieben machen. Aber die "take-away-message" des obigen Beispiels ist. folgende: Wird ein Browserfenster vom Nutzer geöffnet (z.B. durch Starten des Browsers oder zusätzlichem Öffnen eines Fensters durch den Websurfer) ist dies undefiniert, d.h. es hat keinen Namen. Wird ein Browserfenster jedoch durch einen mit einem Link verknüpften Target="beliebigerName" geöffnet, hat es wie auch die Einzelframes auf einer Frameseite einen definierten Namen und kann konkret angesteuert werden. Dies wird uns später noch öfters begegnen, wenn wir mit JavaScript arbeiten wollen.

Wichtige Anwendungen und Vereinfachungen:

Tatsächlich braucht man die Ansteuerung von Frames oder zusätzlichen Fenstern sehr häufig, vor allem natürlich bei der Benutzung von Frames. Man muss aber nicht in jedem Fall das Target zu jedem Link schreiben.

Beispiel 1: Alle Links sollen in einen anderen Frame zielen.

Stellen Sie sich wieder unsere schoenframe.html-Seite vor. Links ist im frame mit Name frmenu das Inhaltsverzeichnis (inhalt.html) geladen. Dort sollen - so nehmen wir einmal an - alle Links bis auf eine Ausnahme auf den Frame frhaupt verweisen (also die Links für anfang.html, kap1.html, kap2.html usw. (vielleicht ja sogar bis kap. 20). Nur der ebenfalls auf der Seite inhalt.html befindliche Link zum Rechenzentrum soll die Frames brechen.

Wie vermeiden wir, 20x target="frhaupt" schreiben zu müssen? Ganz einfach. Wir schreiben in den header von inhalt.html folgendes: <base target="frhaupt">

also z.B. unter die Titelzeile (hier rot dargestellt)

<html>
<head>
<title>Inhalt</title>
<base target="frhaupt">
</head>
<body>
blablbla.....

Ganz einfach. Dann kommen alle Links automatisch in dieses Fenster, wir müssen kein Target dazu schreiben. Nur den Link zum Rechenzentrum ergänzen wir durch target="_top", dies ist vorrangig vor dem base target und alles läuft wie wir wollen.

Hinweis: Übrigens habe ich die Linkziele für das Inhaltsverzeichnis dieser Site (im Frame links) genauso definiert.

Beispiel 2: Alle Links sollen in ein neues Fenster zielen.

Stellen Sie sich vor, Sie haben eine Linkliste auf externe Angebote erstellt. Die html-Seite mit den Links könnte z.B. im frame frhaupt geladen sein (oder Sie haben eine Linkliste ohne Frames erstellt). Sie wollen nun, dass die Linkliste stehen bleibt, und vom Nutzer aufgerufene Links in einer zweiten Seite geladen werden.

Sicher kommen Sie selbst drauf, wie das geht. Genau: Wieder ein base target einfügen mit einem beliebigen Target-Namen, z.B. <base target="linkfenster".

Wenn Sie aber ein paar Links auf Ihrer Seite haben, die in einen anderen Frame bzw. ein bereits geöffnetes Browserfenster sollen, dann verwenden Sie bei den entsprechenden links eben den target-Zusatz (also target="frhaupt" bzw. target="_top")

Nicht vergessen!! Irgendwann wird der Websurfer Ihre Seite mit den Frames verlassen wollen. Es muss also wenigstens ein Ausgangslink mit target="_top" vorhanden sein, sonst bekommt der User die Frames nicht mehr los und ist sauer und Sie sind möglicherweise in rechtlichen Schwierigkeiten!

So, nun sind wir fast fit mit den Frames, ein paar "Verschönerungsmöglichkeiten" für Frames sollten Sie aber noch kennen, siehe letzten Teil dieser Lektion.

>> zum letzten Teil dieser Lektion (4. von 4): Framesattribute.

<< Modul 3.1.2