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.

<mark> Physische Auszeichnung

CSS - Textbereich als veränderbare Bildanzeige verwenden

PHP - Ausgabe von Wörtern begrenzen

JavaScript - Neues Fenster öffnen

MySQL - Werte von Heute auslesen