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 Bausteinen (Snippets) aus den Bereichen CSS, PHP, JavaScript und MySQL.

CSS - Text mit gestreiftem Hintergrund

PHP - MySQL-Version ermitteln und anzeigen

JavaScript - Eine Animation ab einer bestimmten Scroll-Position starten

MySQL - Flexible Insert-Funktion