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.
<ul> Aufzählungsliste
CSS - Tabellenzeilen einfärben
PHP - Hinzufügen von Wasserzeichen beim hochladen eines Bildes