JavaScript - Die Höhe eines IFrames automatisch 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 id="iframeID" src="inhalt.htm"></iframe>

Datei: inhalt.htm

Scrollleisten werden im IFrame nicht angezeigt wenn die ID (htmlID) im <html>-Tag notiert wird.


<!DOCTYPE html>

<
html id="htmlID">
 <
head>
  <
meta charset="UTF-8">
  <
title></title>

<
script>
window.addEventListener'load', function() {
 
parent.document.getElementById('iframeID').style.height =
 (
document.getElementById('htmlID').offsetHeight)+'px';
});
</
script>

 </
head>
<
body>

<
p>Der IFrame Inhalt ...</p>

</
body>
</
html>

Möglicheweise ist auch folgende CSS-Anweisung hilfteich:
iframe#myFrame {
 border: 1px Solid Black;
 position: Absolute;
  width: Inherit;
  top: 0px;
  height: 80vh;
}

Je nach dem was man machen möchte, ist ein iframe nicht mehr zeitgemäß. Vor allem die Darstellung in mobilen Endgeräten macht oft Ärger.

Bausteine

Eine zufällige Auswahl von „Bausteinen” (Snippets) aus den Bereichen CSS, PHP, JavaScript und MySQL.

CSS - Mit ::selection markierten Text hervorheben

PHP - Grafiken mit PHP rotieren

JavaScript - Individuelle Fehlermeldung ausgeben

MySQL - Datensätze (Gehalt) zwischen 2000 und 3000 anzeigen