Navigation als eingebetteter Frame
|
Inhaltsverzeichnis
|
Neben embed und object stellt das hier beschriebene iframe-Element die dritte Möglichkeit dar, beliebige andere Ressourcen in HTML einzubetten. Bei diesem Element besteht der Haupt-Einsatzzweck darin, vollständige anderen Webseiten einzubinden. Das kann beispielsweise eine auf jeder Seite benötigte Navigation sein, oder ein separat vom übrigen Inhalt dynamisch erzeugter Inhalt, etwa ein Newsticker.
Eingebettete Frames werden seit langem von allen Browsern interpretiert und gehören seit Version 4.0 zum HTML-Standard. In HTML 4.0 wurden sie allerdings in eine Schublade mit den mittlerweile verpönten und nicht mehr im Standard enthaltenen Framesets gesteckt und nur in der nicht wirklich erwünschten Frameset-Variante von HTML 4.0 mitgeführt. Mit HTML5 gehört das iframe-Element endlich zum offiziellen Sprachstandard. Dabei wurden auch einige neue Attribute und damit verbundene Konzepte eingeführt, die allerdings teilweise nicht ganz unumstritten sind und sich eher an zukünftige Browser richten.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Eingebettete Frames</title> </head> <body> <header> <h1>HOME</h1> </header> <div style="width: 250px; float: left;"> <nav> <iframe src="navigation.html" width="220" height="350" style="border: 0;"> <a href="navigation.html">Navigation anzeigen</a> </iframe> </nav> </div> <div style="float: left;"> <p>Viel Inhalt</p> </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <base target="_parent"> <title>Navigation</title> </head> <body> <ul> <li><a href="home.html">HOME</a></li> <li><a href="produkte.html">Produkte</a></li> <li><a href="referenzen.html">Referenzen</a></li> <li><a href="downloads.html">Downloads</a></li> <li><a href="rueckschau.html">Rückschau</a></li> <li><a href="vorschau.html">Vorschau</a></li> <li><a href="kontakt.html">Kontakt</a></li> <li><a href="impressum.html">Impressum</a></li> </ul> </body> </html>
Das Beispiel zeigt eine Webseite, in die eine Navigation eingebunden ist. Die Navigation befindet sich in einer separaten HTML-Datei. So muss die Navigation nur an einer Stelle geändert werden, wenn sie geändert werden soll.
Die Nebeneinander-Anordnung der Navigation und der Seiteninhalte werden im Beispiel durch ein paar CSS-Angaben erzeugt, auf die an dieser Stelle nicht näher eingegangen wird.
Das obige Beispiel besteht aus zwei vollständigen HTML-Dokumenten (die auch in Form von zwei HTML-Dateien existieren). Das erste Dokument zeigt das Haupt-Dokument bzw. die eigentliche Webseite. Darin eingebettet ist ein iframe-Element, markiert durch <iframe>…</iframe> (iframe = inline frame = eingebetteter Rahmen). Im einleitenden <iframe>-Tag wird mit dem Attribut src eine andere HTML-Datei referenziert (src = source = Quelle). Deren Inhalt wird im iframe-Bereich angezeigt.
Der zweite Teil des obigen Beispiels zeigt den vollständigen Code des eingebetteten HTML-Dokuments. Deren sichtbarer Dokumentkörper besteht nur aus einer ungeordneten Liste mit Hyperlinks. Dies ist ein sinnvoller HTML-Code zur Auszeichnung einer Navigation.
Im einbindenden HTML-Dokument bestimmen Sie die Größe des iframe-Bereichs mit den Attributen width und height in Pixeln. Diese beiden Attribute sollten Sie bei eingebetteten Frames in jedem Fall notieren, da der Browser aus einem Inhalt wie einer eingebetteten HTML-Datei keinerlei Hinweise zur Anzeigegröße entnehmen kann. Er wird den iframe-Bereich dann in einer Default-Größe anzeigen.
Der Elementinhalt zwischen <iframe> und </iframe> wird als alternativer Inhalt (Fallback-Inhalt) interpretiert und nur dann angezeigt, wenn der Browser das iframe-Element nicht kennt oder nicht anzeigen kann. Der Inhalt kann aus beliebigem HTML-Code bestehen. Im obigen Beispiel wird ein Link zu der Datei angeboten, die über den Inline-Frame eingebettet wird. Auf diese Weise können Anwender, bei denen der eingebettete Frame nicht angezeigt wird, über den Link zur Navigation gelangen, wo sie dann wiederum eine andere Seite des Angebots auswählen können.
Das iframe-Element kann ein Attribut name erhalten, z.B. <iframe name="navigation" data="navigation.html" …>. Durch den Namen definieren Sie einen konkreten Browsing-Kontext für den Inline-Frame-Inhalt, also eine Art Fenster. Über den Namen des Objekts kann sein Inhalt in JavaScript angesprochen werden. Den Namen können Sie auch in Hyperlinks beim target-Attribut verwenden. So können Sie mit <a href="kunden-navigation.html" target="navigation">Navigation für Kunden</a> einen Link anbieten, bei dessen Anklicken sich der Inhalt des iframe-Elements mit name="navigation" ändert.
Bei width und height interpretieren die Browser seit jeher auch Prozentangaben. Diese werden durch Angaben wie width="80%" oder height="100%" notiert. Im HTML5-Standard wird diese Möglichkeit jedoch nicht ausdrücklich erwähnt. Stattdessen wird dort ausdrücklich darauf hingewiesen, dass die Angaben bei width und height sogenannte CSS-Pixel bedeuten. Das bedeutet: ein Pixel bei einer für Bildschirme angenommenen Pixel-per-Inch-Dichte von 96ppi. Im Zusammenhang mit eingebetteten Frames kann es in einem Webseiten-Layout durchaus sinnvoll sein, prozentuale Breiten anzugeben. Allerdings ist das auch mit der CSS-Eigenschaft width möglich, und dort sind Prozentangaben explizit erlaubt.
Per Voreinstellung zeigen Web-Browser eingebettete Frames mit einem sichtbaren Rahmen an. In vielen Fällen soll ein solcher Rahmen unterdrückt werden, weil er im Layout stört. Im obigen Beispiel wurde der Rahmen deshalb mit style="border: 0" unterdrückt. Die früher üblichen HTML-Attribut border oder gar frameborder gehören seit HTML5 dagegen nicht mehr zum Standard.
Das Gleiche gilt auch für die Beeinflussung des Scroll-Verhaltens im Inline-Frame-Inhalt. Das früher übliche Attribut scrolling entfällt in HTML5 ersatzlos. Stattdessen können Sie das Scroll-Verhalten wie das anderer HTML-Elemente auch mit der CSS-Eigenschaft overflow beeinflussen.
Im Web 2.0 ist es nicht unüblich, über eingebettete Frames Inhalte eigens dafür vorgesehener Webservices von Drittanbietern einzubinden. Dabei gilt jedoch in allen modernen Browsern die sogenannte *Same-Origin-Policy*. Diese hindert in Webseiten eingebundene Inhalte von fremden Websites daran, die einbindende Webseite während der Anzeige im Browser zu manipulieren. Für manche eingebundenen Services, denen der Webseiten-Autor, der den Service in einem Iframe einbinden, kann es aber nützlich sein, die Same-Origin-Policy zu lockern. HTML5 hat deshalb eine Möglichkeit eingeführt, Browsern mitzuteilen, welche Berechtigungen einem Inline-Frame-Inhalt von einer fremden Website eingeräumt werden sollen. Dazu dient das sandbox-Attribut. Diesem Attribut können Sie einen oder mehrere der folgenden Werte zuweisen:
Möglich sind also Einzelangaben wie <iframe sandbox="allow-top-navigation" …> oder kombinierende Angaben wie <iframe sandbox="allow-top-navigation allow-forms" …>. Machen Sie von dieser Möglichkeit nur dann Gebrauch, wenn der Anbieter eines Fremdservices, den Sie via Inline-Frame einbetten wollen, dies zwingend erfordert, und wenn Sie dem Fremdanbieter vertrauen. Dazu sollten Sie den Anbieter gut kennen und sich gegebenenfalls über Erfahrungen anderer, die den gleichen Service nutzen oder genutzt haben, informieren.
Umgekehrt ist es auch möglich, Inhalte, die zwar vom eigenen Host oder der eigenen Domain kommen, explizit als Sandbox-Inhalte zu deklarieren, obwohl sie normalerweise unter die Same-Origin-Policy fallen. Das ist beispielsweise nützlich, wenn der Inhalt eines eingebetteten Frames von einem serverseitigen Script dynamisch generiert wird und darin unberechenbarer, möglicherweise schadhafter Code enthalten sein kann. Beispiel:
<iframe sandbox src="getUserContributions.php?articleid=293">.
In dem Beispiel wird angenommen, dass ein PHP-Script von Anwendern eingegebene Inhalte einliest, die auch kritische HTML-Codes (Scripts zum Beispiel) enthalten können. In diesem Fall kann das sandbox-Attribut auch als Standalone-Attribut notiert werden. Dadurch bestimmen Sie, dass die Quelle vom eigenen Webserver genauso behandelt wird, als käme sie von einer fremden Domain. Selbstverständlich können Sie aber auch in diesem Fall die weiter oben aufgelisteten Einzelerlaubnisse zuweisen, z.B. sandbox="allow-top-navigation".
Wer mit statischen HTML-Dateien arbeitet, kennt das Problem, größere, wiederkehrende Code-Fragmente wie etwa Navigationen, Header oder Footer usw. in allen Einzelseiten wiederholen zu müssen. Das ist nicht sehr änderungsfreundlich. Besser wäre es, solche Code-Fragmente ähnlich wie es in fast allen modernen Programmiersprachen üblich ist zu inkludieren. Die Code-Fragmente stehen dabei in einer eigenen Datei. Durch Inkludieren der Datei wird der Code an einer gewünschten Stelle eingebunden. HTML5 führt genau für diesen Zweck ein neues Attribut für Inline-Frames ein: das Standalone-Attribut seamless (seamless = nahtlos). Ist es notiert, soll der Browser die beim src-Attribut angegebene Ressource nicht einbetten, sondern direkt inkludieren. Das bedeutet:
Das explizite sandbox-Attribut hat in HTML5 die Einführung eines weiteren Attributs nach sich gezogen. Mit dem Attribut srcdoc können Sie den Inhalt eines Inline-Frames direkt notieren, statt ihn über das src-Attribut zu referenzieren. Der Grund so etwas zu tun ist, dass sich so in Verbindung mit dem sandbox-Attribut Inhalte direkt in den HTML-Code einfügen lassen, die als sandboxed Inhalt gelten. Gedacht ist diese Möglichkeit nicht für statische Webseiten, sondern für Webseiten, die zur Laufzeit von einem Script generiert werden und auch von Anwendern beigetragene Inhalte mit HTML-Code enthalten können. Beispielsweise Kommentare zu einem Blog-Artikel oder Beiträge in einem Forum. Ein Beispiel:
<iframe sandbox seamless srcdoc="<p>Das ist ein Versuch, <script>top.location.href="schmuddelserver.com"</script> Unfug zu treiben</p>"></iframe>
Das iframe-Element enthält in diesem Fall kein src-Attribut. Stattdessen enthält es erstens ein sandbox-Attribut, wodurch der „Inhalt“ so behandelt wird, als würde er von einem fremden Server eingebunden, mit allen Restriktionen der Same-Origin-Policy. Zweitens enthält es ein seamless-Attribut, um seinen Inhalt nahtlos in die Webseite zu inkludieren, und drittens das srcdoc-Attribut. Dieses Attribut enthält den gesamten HTML-Code des einzubindenden Inhalts. Es kann sich dabei auch um umfangreichere Inhalte mit viel HTML-Code handeln. Der HTML5-Standard schreibt lediglich vor, dass die Zeichen " und & innerhalb der Wertzuweisung durch ihre benannten HTML-Zeichen " bzw. & umschrieben werden müssen.
Wenn Sie als Anwender auf dem Videoportal YouTube bei einem Video die Funktion „Teilen“ und dann „Einbetten“ wählen, erhalten Sie den HTML-Code zum Einbetten des Videos in eigene Webseiten. Dabei wird auch die Möglichkeit mitgeliefert, das eingebettete Video auf Vollbild zu vergrößern.
<iframe width="560" height="315" src="http://www.youtube.com/embed/XsaRuCIrzjs" frameborder="0" allowfullscreen></iframe>
Wenn Sie das Standalone-Attribut allowfullscreen (oder allowfullscreen="true") im Start-Tag eines iframe-Elements notieren, erlauben Sie dem im Frame eingebetteten Inhalt, sich auf die volle Bildschirmgröße bringen zu dürfen. Gedacht ist das für Anwendungsfälle wie Präsentationen, ablenkungsfreies Editieren oder eben für Videos. Beenden kann der Anwender den Vollbild-Modus in der Regel mit der Escape-Taste.
Die Funktionalität, um den iframe-Inhalt tatsächlich auf Vollbildgröße zu bringen, muss im eingebetteten Inhalt des Frames bereit gestellt werden. Dazu ist Scripting erforderlich.
<!doctype html> <head> <meta charset="utf-8"> <title>Eingebetter Inhalt</title> <script> function FullScreen() { var isInFullScreen = (document.fullScreenElement && document.fullScreenElement !== null) || (document.mozFullScreen || document.webkitIsFullScreen); var docElm = document.documentElement; if(!isInFullScreen) { if(docElm.requestFullscreen) docElm.requestFullscreen(); else if(docElm.mozRequestFullScreen) docElm.mozRequestFullScreen(); else if(docElm.webkitRequestFullScreen) docElm.webkitRequestFullScreen(); } } </script> </head> <body> <p><a href="javascript:FullScreen();">Vollbild</a></p> </body> </html>
Das Beispiel zeigt ein HTML-Dokument, das als Inhalt in einem iframe eingebettet werden soll, der mit allowfullscreen ausgezeichnet wird. Das Dokument enthält einen Hyperlink (<a href=“…“>…</a>), bei dessen Anklicken die JavaScript-Funktion FullScreen() aufgerufen wird. Diese Funktion ist im gleichen Dokument oberhalb in einem Scriptbereich notiert. Die Funktion fragt ab, ob sich das Dokument nicht schon im Vollbildmodus befindet. Wenn nicht, wird die Dokument-Element-Objektmethode requestFullScreen() aufgerufen. Diese wurde mit HTML5 neu in das Document Object Model (DOM) für HTML aufgenommen. Da die Implementierung der Vollbild-Funktionalität in den Browsern derzeit noch in der Testphase ist, lässt sich die Funktionalität momentan nur mit Hilfe der anbieterspezifischen Varianten mozRequestFullScreen() bzw. webkitRequestFullScreen() realisieren.
Die Details der JavaScript-Funktion müssen Sie an dieser Stelle nicht unbedingt verstehen. Binden Sie die Funktion einfach wie gezeigt in einem Scriptbereich ein, und rufen Sie sie wie gezeigt mit Hilfe eines Links oder mit einem Formular-Button, also etwa in der Form <input type=“button“ value=“Vollbild“ onclick=“FullScreen();“> auf. Zu Formular-Buttons siehe Abschnitt Schaltflächen (Buttons).
Korrekturen, Hinweise und Ergänzungen
Bitte scheut euch nicht und meldet, was auf dieser Seite sachlich falsch oder irreführend ist, was ergänzt werden sollte, was fehlt usw. Dazu bitte oben aus dem Menü Seite den Eintrag Diskutieren wählen. Es ist keine Anmeldung erforderlich, um Anmerkungen zu posten. Unpassende Postings, Spam usw. werden allerdings kommentarlos entfernt.