Vorwort Inhaltsverzeichnis Andere Seiten Impressum Shop Webdesign

Frames nachladen

Warum sollen denn die Frames nachgeladen werden?
Zu Anfang des Kapitels hatte ich bereits darauf hingewiesen, dass Suchmaschinen Probleme mit auf Frames aufgebauten Web-Seiten haben.
Ein Problem ist in dem von der Suchmaschine zurückgelieferten Suchergebnis. Es wird eine Seite als Link zurückgeliefert die eigentlich Teil eines Framesets ist. Jetzt fehlt das Frameset und damit die Navigation.

Ein Beispiel zeigt hier aber mehr wie tausend Worte.

Von Suchmaschine zurückgelieferter Link

Man sieht, da fehlt etwas.

Als Abhilfe für dieses Problem gibt es ein kleines JavaScript von Dominik Leonhardt welches wir jetzt hier einsetzten.

Das Script können wir hier downloaden.
In dem Zip-Archiv finden sich 5 Dateien. Eine davon ist die framecheck.js. Diese ändern wir wie folgt ab und speichern sie in unserm Projektverzeichnis im Verzeichnis javascript.

//------------------------------------------------------------------------------ // // FRAME-CHECK // Version: 1.0 - Datum: 05.04.2000 // Copyright (c) 2000 by Dominik Leonhardt. Alle Rechte vorbehalten. // // EINSTELLUNG // // framename : Hier müssen Sie den Namen des Frames eintragen, in den die // Seiten geladen werden soll. // framename="inhalt"; // // frameset : Hier müssen Sie den Dateinamen des Frameset eintragen. Am // besten relativ zum server (/index.htm), damit FRAME-CHECK // auch aus Unterverzeichnissen läuft. // frameset="index.html"; // //------------------------------------------------------------------------------ //------------------------------------------------------------------------------ // FrameCheck(); // Diese Funktion überprüft, ob die Datei im Frame geladen wurde. //------------------------------------------------------------------------------ function FrameCheck() { if(!eval("parent."+framename)) { location.replace(frameset+"?"+location.href); } } //------------------------------------------------------------------------------ // LoadFrame(); // Diese Funktion lädt die richtige Datei in den Frame. //------------------------------------------------------------------------------ function LoadFrame() { var URL=location.search; if(URL) { frame=eval("frames."+framename); frame.location.replace(URL.substring(1,URL.length)); } }

Die fettgeschriebenen Teile wurden in das Originalscript eingetragen.
Jetzt nehmen wir uns die index.html vor und fügen das JavaScript ein.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html> <head> <title>Die Wollmaus</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" /> <meta name="description" content="Das geheime Leben der Wollmaus."> <meta name="author" content="Rainer"> <meta name="keywords" content="Wollmaus, Leben und Lebensräume, Staubsauger"> <meta name="robots" content="index, follow"> <script ="JavaScript" src="javascript/framecheck2d.js" type="text/javascript"></script> </head> <frameset rows="150,*" onload="LoadFrame();" frameborder="0" framespacing="0" border="0"> <frame src="logo.html" name="logo"> <frameset cols="200,*"frameborder="0" framespacing="0" border="0" > <frame src="navigation.html" name="navigation"> <frame src="inhalt.html" name="inhalt"> <noframes> <h1>Die Wollmaus</h1> <p>Auf diesen Webseiten finden sie alles Wissenswerte über die Wollmaus.</p> <p>Die Wollmaus hält sich üblicherweise in dunklen Ecken auf, so dass es nicht einfach ist, sie zu erforschen.</p> <p>Wir haben hier versucht etwas über die Entstehung und das Sein der Wollmaus, aber auch etwas über die natürlichen Feinde zusammenzutragen.</p> <p>Viel Spaß dabei.</p> <p><a href="navigation.html">Hier</a> können sie mehr über die Wollmaus erfahren.</p> </noframes> </frameset> </frameset> </html>

Oben im Head (Kopf)-Bereich wird das JavaScript in das aktuelle Dokument geladen. Hier ist auf den Pfad zu dem Script zu achten.

Mit onload="LoadFrame();" (onload engl. Während des Ladevorganges) wird aus dem Script die Funktion LoadFrame (LoadFrame engl. Lade Rahmen) während die Seite im Browser geladen wird aufgerufen.

Jetzt müssen wir nur noch eine kleine Änderung an unseren Inhaltsseiten vornehmen.
Dazu fügen wir in die Seiten den fettgeschriebenen Quellcode ein und speichern die Seiten wieder.

<?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Die Wollmaus</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta name="description" content="Alles über das Leben der Wollmaus."/> <meta name="author" content="Dein Name" /> <meta name="keywords" content="Wollmaus, Staub, Hausstaub, Staubsauger"/> <meta name="robots" content="index, follow"/> <link rel="stylesheet" type="text/css" href="css/stylesheet.css" /> <script src="javascript/framecheck2d.js" type="text/javascript"></script> <script type="text/javascript">  </script> </head> <body> <noscript><a href="index.html" >Startseite</a></noscript> <div class="inhalt"> <h1>Die Wollmaus</h1> <p>Auf diesen Webseiten finden sie alles Wissenswerte über die Wollmaus.<br /> Die Wollmaus hält sich üblicherweise in dunklen Ecken auf, so dass es nicht einfach ist, sie zu erforschen.</p> <p>Wir haben hier versucht etwas über die Entstehung und das Sein der Wollmaus, aber auch etwas über die natürlichen Feinde zusammenzutragen.</p> <p>Viel Spaß dabei.</p> </div> <div class="fuss"> <script src="javascript/fuss.js" type="text/javascript"></script> <noscript><a href="impressum.html"> Impressum</a></noscript> </div> </body> </html>

Im Kopf-Bereich der Seite wird zuerst mit script scr= das Javascript framecheck2d.js (hier auf die richtige Pfadangabe achten) aufgerufen und anschliessend die Funktion FrameCheck().
Das Script prüft dann, ob diese Seite innerhalb des Frames aufgerufen wurde. Wenn nicht, so wird das Frame nachgeladen und alles ist da wo es hingehört.

Im noscript-Tag wird noch ein Link auf die Startseite gesetzt. Wenn JavaScript im Browser nicht aktiviert ist wird dieser Link angezeigt und der Besucher kann die Startseite anwählen.

Wenn wir jetzt unser Projekt aufrufen so werden wir keinen Unterschied bemerken.
Jedoch wenn wir einen von einer Suchmaschine zurückgelieferter Linkanklicken fällt uns etwas auf. Diesen Link auch einmal mit abgeschalteten JavaScript ausprobieren um den NoScript zu sehen.

Zum Vergleich noch einmal, wie ein von einer Suchmaschine zurückgelieferter Link ohne das JavaScript aussieht.

Inhalt Nach oben Was sind ServerSideIncludes