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.

<u> Unterstreichen (Physische Auszeichnung)

CSS - Mit import mehrere CSS-Dateien zusammenfassen

PHP - Formulareingaben überprüfen und Fehlermeldungen ausgeben

JavaScript - Zeichnung erstellen

MySQL - Höchstwert einer Spalte ermitteln