You are here: Home > Per IFrame eine Webseite in einer Webseite automatisch nachladen

Per IFrame eine Webseite in einer Webseite automatisch nachladen

By on 15. November 2008 in Posts

Oha, der Titel klingt kompliziert… ich versuchs mal zu erklären (alte HTML-Hasen klicken bitte weg, das ist im Moment Beginnerterrain):

Die Aufgabenstellung ist, eine Webseite, die zB eine Webcam zeigt, regelmässig neu zu laden, damit stets das aktuelle Bild angezeigt wird. Das ist erstmal kein Problem, das geschieht im Header mit dem Statement:

<meta http-equiv=”refresh” content=”10″>

“10″ kennzeichnet hier die Sekunden, nach denen neu geladen werden soll.

Eine fertige Datei (nennen wir sie mal sificam.html) sieht also so aus:

<html>
<head>
<meta http-equiv=”refresh” content=”10″>
</head>
<body>
<p><img src=”http://blog.aufsfeld.org/wp-content/uploads/2008/11/current.jpg” alt=”SifiCam”></p>
</body>
</html>

Lifebeispiel hier (Die Webcam lädt minütlich ein neues Bild auf den Server, so dass spätestens nach sechs automatischen Akualisierungen ein neues Bild angezeigt wird)

Soweit, so gut. Nun soll aber eben jene relativ nackte Datei in einen bestehenden Webauftritt (CMS, Blog etc) eingebunden werden. Dort kann man natürlich keinen Header ohne weiteres ändern, das lässt die Struktur eines Blogs oder CMS nicht zu. Also behilft man sich mit der Einbindung eines IFrames. Ein IFrame ist ein eine Art eingeblendete externe oder interne Webseite. Diese Seite hat dann natürlich auch einen Header und somit auch Meta-Statements (s.o.) ;-)

IFrame-Syntax:

<iframe src=”http://aufsfeld.de/Blogfiles/sificam.html” height=”480″ width=”640″ frameborder=”0″ scrolling=”no”> Ihr Browser unterstuetzt keine Frames. Zur Anzeige der Seite bitte <a href=”http://aufsfeld.de/Blogfiles/sificam.html”>hier klicken</a>.<br>
</iframe>

In diesen Post eingebunden sieht das dann so aus:

Klasse, oder?
.

5 Responses to Per IFrame eine Webseite in einer Webseite automatisch nachladen

  1. Dave 16. November 2008 at 00:11 #

    Erstaunlich! Das funktioniert sogar in meinem Feedreader NetNewsWire!

    Antworten
  2. Uwe 16. November 2008 at 08:10 #

    Die (leider nicht lösbare) Herausforderung ist, die Höhe des IFrames dynamisch an den Inhalt anzupassen.

    Da, Cross-Site-Scripting-sei-Dank inzwischen jeder Browser aber verbietet per JavaScript auf Inhalte des IFrames (z.B. dessen clientHeight) zuzugreifen, geht das leider nicht.

    Antworten
  3. Stephan A. 16. November 2008 at 08:56 #

    @Dave: NetNewsWire ist ja auch nette Software ;-) Im Googlereader tut nicht…

    @Uwe: Aha, erhellendes Moment. Ich hatte IFrames schon öfter verwendet (vorgekaut bekommen als Widgets fürs Blog etc), aber jetzt erst verstanden wie das funktioniert. Der Zusammenhang zum XSS war mir nicht klar. Wie gesagt, in Sachen Webprogrammierung nur User ;-)

    Antworten
  4. Chinch-illa 2. Dezember 2008 at 19:19 #

    Da finde ich doch glatt eine Anwendung dafür, sauber. Wie gut hier ab und zu mal reinzuschauen.

    Antworten
  5. Stephan A. 2. Dezember 2008 at 22:15 #

    Freut mich sehr… was hast Du damit realisiert?

    Antworten

Hinterlasse eine Antwort