Einen Augenblick Geduld...
Die Einbindung von externen Dateien auf einer Webseite ist ein sinnvolle Funktion und funktioniert in HTML5 reibungslos.
Mit ihr ist es z.B. möglich diesen besagten Inhalt von Menschen einfügen zu lassen, die nicht in der HTML-Welt zuhause sind, aber die Aufgabe haben aktuelle Informationen auf eine Seite zu stellen.
Oder ihr möchtet eine weitere HTML-Seite von einem anderen (Web-)Server in eure Webseite einbinden. Diese soll sich nahtlos in euer Design einfügen und es soll nachher so aussehen, als ob diese Seite ein fester Bestandteil der Webseite ist.
Genau dafür gibt es die Funktion iFrame.
Ich selbst nutze sie auch auf dieser Webseite. Hier verwende ich sie z.B. für die Designstudien. Der Vorteil ist der, dass sie quasi in einer Art Sandbox laufen. Wenn also Fehler in dieser Datei sind, die Datei keine Inhalte aufweist oder weil z.B. der externe Server offline ist, wird nur der "Kasten" des iFrames nicht korrekt angezeigt - der Rest der Webseite funktioniert aber weiterhin und kann auch vollständig vom Betrachter geladen werden.
Ich beginne mit der Vorbereitung der Webseite auf der das iFrame eingebunden werden soll. Letztendlich ist das iFrame eine längere Befehlszeile, die in den Bereich des body geschrieben wird.
Doch zunächst das Gerüst der Webseite. Der Webseite gebe ich anschließend einen Namen, z.B. webseite.html und speichere sie in einem Verzeichnis meiner Wahl.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
</body>
</html>
Als nächstes trage ich die besagte Zeile für das iFrame zwischen den beiden body-Tags ein (zwischen Zeile 7-9).
Diese könnte beispielsweise so lauten:
<iframe src="externe_datei.html" name="IntFenster1" width=570 marginwidth="0"
height=90 marginheight="2" align="left" scrolling="no" frameborder="0" background="#FFFFFF"></iframe>Was hier auf zwei Zeilen verteilt ist kann und sollte in eine Zeile hineingepackt werden. Ich habe das hier nur aus Gründen der Sichtbarkeit bei Nutzung von geringeren Bildschirmauflösungen in zwei Zeilen gepackt.
Doch schauen wir uns an was in dieser Zeile steht:
Wie immer wird auch der iFrame-Befehl in eckige Klammer gepackt und mit dem Zusatz / zum Schluss auch wieder geschlossen.
Dieses ''Extra-Fenster'' stellt nun die externe Datei (''externe_datei.html'') in einer Breite von 570 Pixeln auf der Webseite dar (''width=400'').
Alles was einen längeren Inhalt hat wird nach 570 Pixeln umgebrochen.
So verhält es sich auch mit der Höhenangabe des iFrames. Die Höhe wird mit dem Befehl height=''90'' auf 90 Pixel begrenzt.
Mit align=''left'' wird der Inhalt linksbündig formatiert.
Mit dem Befehl marginheight=''2'' wird ein Abstand von 2 Pixeln an allen Seiten erzeugt. Er ist mehr aus optischen Gründen hier eingefügt, damit ein ''harmonischer Abstand'' zum Rest der Webseite entsteht.
Mit scrolling=''no'' wird verhindert, dass in diesem iFrame nach unten gescrollt werden kann. Der entsprechend längere Inhalt würde auf dieser Seite einfach abgeschnitten werden. Mit dem Befehl entstehen auch keine vertikalen Scrollbalken. Das ist optisch betrachtet auch richtig gut so. Einen Unterschied würde es bedeuten, wenn man in diesem ''Kasten'' scrollen können soll. Dann würde hier der Befehl scrolling=''yes'' stehen.
Durch frameborder=''0'' ensteht kein Rahmen um den ''Kasten'' herum. So integriert sich Dieser nahtlos in die Webseite.
Der Befehl background=''#FFFFFF'' erzeugt einen weissen Hintergrund für den Inhalt des iFrames. Damit sich das iFrame nicht doch von der eigenen Webseite abhebt, sollte natürlich auch dieser Hintergrund weiss sein.
Falls ein zweites iFrame auf dieselbe Webseite eingebunden wird sollte es sich mit dem Parameter name=''..'' vom ersten Eintrag abheben. Hier ist es der Eintrag name=''IntFenster1'', also dann z.B. IntFenster2, etc.
Damit so ein iFrame nicht ''irgendwo'' auf der Webseite herumschwebt und sich da einfügt wo noch Platz zu sein scheint, sollte man es in einen div-Container packen. Dieser wiederum kann mit absoluten Koordinaten in den styles der Webseite (''position: fixed; width: 580px; height: 100px; left: 100px; position: fixed;'')
oder relativen Koordinaten (''position: relative;'') auf der Webseite platziert werden. Und genau da setzt sich dann auch unser iFrame hin.
Hat der definierte div-Container eine feste Breite, kann auch unser iFrame dynamisch, z.B. in seiner Breite angegeben werden. Im obigen Beispiel haben wir ja eine Breite von 570 Pixeln (''width=''570''). So können wir für den Parameter width auch eine Größe in % angeben, z.B. width=''70%''. Dann würde unser iFrame nur 70% vom div-Container ausmachen und wäre damit letztendlich auch für kleinere Bildschirmgrößen geeignet (vorausgesetzt der div-Container ist ebenfalls dynamisch mit der Angabe in % oder in einer anderen geeigneten Breite).
Hier ist ein mögliches Beispiel im Browser. Der grüne Rahmen markiert nur die Grenze des iFrames, ist aber nicht sichtbar.
Mit der Datei ''externe_datei.html'' habe ich eine HTML-Datei (im selben Verzeichnis) genutzt. Es kann aber durchaus auch eine reine Textdatei sein, z.B. ''externe_datei.txt''. Diese enthält keine Formatierbefehle, sondern wirklich nur reinen Text (ANSII-Format). Für ''brandneue'' Infos im Stil eines ''Tickers'' sollte das reichen. Da benötigt man i.d.R. keine weiteren Formatierungen für den Text.
Bei Bildern wird es etwas problematisch ohne das umhüllende HTML-Format. Da reicht es in der externen Datei, wenn das Bild mit
<img src="pic/bild.jpg" alt="Platzhalter für Bildbeschreibung" width="100%" title="Bildbeschreibung"/> in die body-Befehle der externen HTML-Datei eingebunden wird.
Das Bild liegt hier übrigens in einem Verzeichnis ''pic'' und hat eine relative Angabe zu seinem Dateipfad (eine absolute Angabe wäre z.B. ''https://tdeep.de/pic/bild.jpg'').
Im Übrigen kann man im gezeigten Beispiel auch die Breite des Bildes beeinflussen mit width=100%, bzw. dann z.B. mit 80%, etc. verringern, damit es in das iFrame passt, ohne ein Bildbearbeitungsprogramm zu bemühen.
So lassen sich bei Bedarf auch nur Ausschnitte eines Bildes darstellen (dann am besten aber wieder mit einer festen Größenangabe in px, damit auf allen Geräten der selbe Bildausschnitt zu sehen ist).
Ich hoffe, auch dieses Tutorial war hilfreich.
Ich wünsche viel Erfolg mit den iFrames - eine gute Methode um externe Dateien auf die eigene Seite zu bringen.