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.

<progress> Fortschrittsanzeige

CSS - Wasserzeicheneffekt - Hintergrundbild fixieren

PHP - Kalenderwoche

JavaScript - Langsam zum Seitenanfang scrollen

MySQL - Das Datum der letzten Woche anzeigen