Inline Frames

Normalerweise nutzt man die Inline Frames um externe Inhalte wie damals zu Frameset-Zeiten in eine Seite einzubinden. Wenn es nur um die platzsparende plazierung von Inhalten geht, reicht aber auch eine Div Box die man auf eine feste Größe Setzt und mit Scrollbalken versieht. Das hat zudem den Vorteil das die Gliederung des Textes eingehalten werden kann (SEO, semantische Gliederung des Inhaltes).

Inline Frame (iframe)

Der iframe Beispiel

<iframe src="extrainfo.html" name="Fenster" width="300" height="200" scrolling="auto" style="border:none;">
</iframe>

Erläuterung: Ein Frame der Größe 300 x 200 Pixel wird erzeugt. Mit Hilfe eines internen Styles werden die sichtbaren Rahmen entfernt.

Verweis auf einen Inline Frame

<a href="nochmehrinfo.html" target="Fenster">Noch mehr Infos</a>

Verfügbare Attribute

Im einleitenden <iframe>-Tag können Sie folgende Eigenschaften definieren:

Mit width= [Pixel/Prozent] bestimmen Sie die Breite des eingebetteten Frames, mit height= seine Höhe. Die Funktionalität ist identisch wie die bei Grafiken (siehe Breite und Höhe einer Grafik).

Mit align=left richten Sie den eingebetteten Frame links aus. Der folgende Text fließt rechts um den Frame. Mit align=right richten Sie den eingebetteten Frame rechts aus und der folgende Text fließt links um den Frame.

Mit scrolling= [yes/no/auto] können Sie Scrollbars (Bildlaufleisten) in dem eingebetteten Frame erzwingen oder verhindern. Die Funktionalität ist identisch wie die bei normalen Frames. Beachten Sie:

Die Atrtribute hspace= und vspace= werden vom MS Internet Explorer interpretiert, gehören aber nicht zum Standard von HTML 4.0.

Responsive iFrame

http://t3n.de/news/responsive-iframe-retrofitting-608891/

iFrame Breaker

Testen ob die Seite im iFrame angezeigt wird

if (window != top){
  top.location.href = location.href;
}

if ( top !== self ) top.location.replace( self.location.href );

Erklärung:

if ( top !== self ) { // we are in the iframe
} else { // not an iframe
}

Allowed Parent

Todo Testen

Vorgehen array mit allowed Sites -> abgleichen

$allowedUrls = array(); // fill this
if (window != top){
  $myParent = top.location.href;
  // abgleichen...
  if(inArray($myParent,$allowedUrls){
  // show page
  }else{
}
}

Weiterführendes

Infos von:

http://webkompetenz.wikidot.com/html-handbuch:eingebettete-frames

Eingebettete Frames und Sandboxing (HTML5)

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:

• allow-same-origin: Mit diesem Wert erlauben Sie, dass die per Inline-Frame eingebettete Webseite vom Browser so behandelt werden soll, als würde sie vom gleichen Host oder der gleichen Domain stammen wie das einbindende HTML-Dokument. Durch die Angabe dieses Attributwerts heben Sie die Same-Origin-Policy für das iframe-Element auf.
• allow-top-navigation: Mit diesem Wert erlauben Sie dem eingebundenen Inhalt, den Inhalt des obersten xBrowsing-Contextes zu ändern. D.h. wenn die eingebettete Webseite beispielsweise Hyperlinks mit einer Angabe wie <a href="eigener-inhalt.html" target="_top"> enthält, wird beim Anklicken das gesamte aktuelle Browserfenster bzw. der aktuelle Browser-Tab geändert (und nicht nur der Inhalt des Inline-Frames).
• allow-forms: Mit dieser Angabe erlauben Sie, dass die eingebettete Webseite Formulare enthalten darf, also vom Anwender Eingaben abfragen oder erzwingen kann, von denen dieser möglicherweise gar nicht weiß, dass das Formular von einem ganz anderen Web-Anbieter stammt als von dem, dessen Webseite er gerade aufgerufen hat, und die das Formular in einem eingebetteten Frame enthält.
• allow-scripts: Mit dieser Angabe erlauben Sie, dass die eingebettete Webseite JavaScript-Code enthalten darf, der auf die einbettetende Webseite zugreift, also aus dem Inline-Frame-Fenster heraus zum Beispiel Inhalte einer im Browser angezeigten, einbettenden Webseite manipulieren kann.

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: n<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".

Inkludieren statt Einbetten (HTML5)

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:

Stylesheet-Definitionen des inkludierenden Dokuments werden auch für das inkludierte Dokument gültig. Normalerweise bleiben Webseiten in Iframe-Fenstern von den Style-Definitionen des Dokuments, in dem das iframe-Element notiert ist, unberührt. Hyperlinks im inkludierten Dokument öffnen, wenn nichts anderes angegeben ist, ihr Verweisziel in dem Browser-Fenster oder -Tab, in dem das Dokument mit dem iframe-Element angezeigt wird. Normalerweise werden Hyperlinks im inkludierten Element, wenn nichts anderes festgelegt ist, im Iframe-Fenster geöffnet. Der inkludierte Inhalt verhält sich so, als würde er in einem sonst nicht weiter spezifizierten, blockerzeugenden Element stehen, also etwa so, als würde sich das iframe-Element wie ein div-Element verhalten, dessen Inhalt der inkludierte Inhalt ist. Angaben zu width und height werden bei Verwendung von seamless eigentlich überflüssig. Arbeiten Sie in diesem Fall besser mit Stylesheets und den CSS-Eigenschaften width und height, so wie Sie es bei einem div-Element ebenfalls tun würden. srcdoc-Inhalte und Sandboxing

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.

Vollbildvergrößerung von eingebetteten Frames (HTML5)

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.

Beispiel (Original wie von YouTube angeboten)

<iframe width="560" height="315"
      src="http://www.youtube.com/embed/XsaRuCIrzjs"
  frameborder="0" allowfullscreen></iframe>

Erläuterung

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.

Scripting-Beispiel

<!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>

Erläuterung

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();“>