Style

Assistant

Startseite
Screenshot
Kurzanleitung
Download
Kurse & Infos
>Tipps & Tricks<
Unterstützer
TMXtensions
?Freeware!
About TM
E-Mail
Made with CSS
Valid HTML 4.01!
Stand: 07.12.2002

Tipps & Tricks – Tipp 10
Zur Übersicht

10. Frames ersetzen mit JavaScript (25.05.1999)

In Newsgroups wird häufig die Frage gestellt, wie man zwei oder mehrere Frames gleichzeitig ersetzen kann. Beispiel 10a legt zunächst ein Frameset bestehend aus einem linken Navigations-Frame (menue) und zwei Inhalt-Frames (oben und unten) im rechten Teil an. Im linken Frame bleibt der Inhalt der Datei menue.htm bestehen, während die rechts angeordneten Frames über die nachfolgende JavaScript-Funktion ausgetauscht werden. 
      <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
      <!--

      function NeueSeiten(obenURL,untenURL)
      {
       parent.oben.location.href=obenURL;
       parent.unten.location.href=untenURL;
      }

      //-->
      </SCRIPT>
Der Funktionsaufruf erfolgt in den Links des Menue-Frames: 
      <A HREF="#" OnClick="NeueSeiten('oben1.htm','unten1.htm')">Link 1</A>
wobei die Dateinamen oben1.htm bzw. unten1.htm entsprechend anzugeben sind. Sollen weitere Frames ersetzt werden, müssen lediglich die JS-Funktion und der aufrufende Link angepasst werden.

Beispiel 10b zeigt, wie sich ein Frame für einen bestimmten Zeitraum mit einer Datei ersetzen lässt. Eine praktische Anwendung ist das Anzeigen von Statusinformationen zu Links in einem separaten Frame, wobei die verwendeten HTML-Dateien möglichst klein sein sollten, um die Ladezeiten zu begrenzen. Beim Berühren eines Links wird in den oberen Frame eine neue Datei geladen. Nach 2 Sekunden erscheint die Ausgangsdatei oben.htm. 
      <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
      <!--

      function NeueSeite(URL)
      {
      parent.oben.location.href=URL;
      setTimeout("AndereSeite('oben.htm')",2000);
      }

      function AndereSeite(URL)
      {
      parent.oben.location.href=URL;
      }

      //-->
      </SCRIPT>
Der Funktionsaufruf erfolgt in den Links des Menue-Frames: 
      <A HREF="#" OnMouseOver="NeueSeite('info1.htm')">Info 1</A>

Im Beispiel 10c wird der Framewechsel über die Events OnMouseOver und OnMouseOut realisiert. Beim Berühren der Links erscheint im oberen Frame jeweils eine neue Datei, während beim Verlassen wieder die Ausgangsdatei oben.htm geladen wird. 
      <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
      <!--

      function Seite(URL)
      {
      parent.oben.location.href=URL;
      }

      //-->
      </SCRIPT>
Der Funktionsaufruf erfolgt in den Links des Menue-Frames: 
      <A HREF="#" OnMouseOver="Seite('info1.htm')" OnMouseOut="Seite('oben.htm')">
        Info 1</A>