JavaScript - Die Höhe eines IFrames responsiv dem Inhalt anpassen

Dieses JavaScript passt autom. die Höhe des IFrames an dessen Inhalt an. Sehr nützlich wenn man den gesamten Inhalt anzeigen und Scrollleisten vermeiden möchte.

<iframe src="inhalt.htm" style="width: 95%"></iframe>

Datei: inhalt.htm

<html lang="de">
 <head>
  <title>Test</title>

<script>
window.addEventListener("load", fenster);
window.addEventListener("resize", fenster);

function fenster() {
 if (parent.document.getElementsByTagName("iframe")[0]) {
  parent.document.getElementsByTagName("iframe")[0].style.height =
   document.getElementsByTagName("html")[0].offsetHeight +'px';
 }
}
</script>

 </head>
<body>

Lorem ipsum …

Demo

Beispiel mit einer ID

Wenn man den Inhalt an ein bestimmtes IFrame richten möchte, dann geht das am besten mit einer ID.

<script>

window.addEventListener("load"fenster);
window.addEventListener("resize"fenster);

function 
fenster() {
 if (
parent.document.getElementById("eineID")) {
  
parent.document.getElementById("eineID").style.height =
   
document.getElementsByTagName("html")[0].offsetHeight +'px';
 }
}
</
script>
<iframe src="inhalt.htm" id="eineID" style="width: 95%"></iframe>

Bausteine  Alle Anzeigen

Eine zufällige Auswahl von Codeschnipseln aus den Bereichen HTML, CSS, PHP, JavaScript und MySQL.

<ul> Aufzählungsliste

CSS - Tabellenzeilen einfärben

PHP - Hinzufügen von Wasserzeichen beim hochladen eines Bildes

JavaScript - HTML-Tabelle Spaltenbreite anpassen

MySQL - Text in einer Spalte austauschen

Schlechte Grafiken
Bevor Sie eine schlechte Grafik verwenden, verzichten Sie lieber darauf. Schlechte Grafiken sind zum Beispiel solche mit einer anderen Hintergrundfarbe als die der Homepage. Auch den Aliasing-Effekt, bei dem die Grafik einen hässlichen Treppenstufen-Effekt hat, sollten Sie vermeiden. Verwenden Sie dazu die Anti-Aliasing, beziehungsweise Glätten-Funktion Ihres Grafikprogrammes. Schlecht sind auch schief gescannte und oder verwaschene Logos und ausgefranste Grafiken.