Intern ❘ Inhaltsverzeichnis ❘ Glossar ❘ Bausteine ❘ Linkliste ❘ Tutorials ❘ Kommentare

Thema: JavaScript - Die Höhe eines IFrames automatisch dem Inhalt anpassen ➧ Artikel anzeigen

Tommy ✶✶✶✶✶ schrieb am Montag, den 13 Januar 2020 #1: Hallo Werner,

vielen Dank an dieser Stelle.

Da es doch immer wieder Leute gibt, die den direkten Einbau solcher Skripte noch scheuen, finde ich diese Alternative mit dem dynamischen Iframe sehr gut.

Ich habe das auch mal hier, in der Software "Mobirise", angewendet:

mobirise-tutorials.com/N[…]misch.html

Vielen Dank für Deine (wie immer) tolle Leistung 👍

Jörg (Immergut) ✶✶✶✶✶ schrieb am Samstag, den 8 Februar 2020 #2: Moin Werner,
Genau, was ich gesucht habe ... Tommy hat mir den Tipp gegeben, das ich es hier finde. Ich hatte nach Iframe => responsiv gesucht und leider nicht das wahre gefunden. Vielleicht solltest du "JavaScript - Die Höhe eines IFrames automatisch dem Inhalt anpassen" in "JavaScript - Die Höhe eines IFrames responsiv dem Inhalt anpassen" 👍

LG 😉

Andreas Tallen ✶✶✶✶✶ schrieb am Montag, den 12 April 2021 #3: Hallo! Schon klasse was man hier bei Werner Zenk alles findet.! Vielen Dank dafür vorweg!!!
Ich habe dieses responsive iframe genutzt und merke aber das wenn in diesem iframe der Inhalt
(Thumbnails) zu lang wird, dann doch wieder eine Scrollbar angezeigt wird.
Wenn der Iframe also zu lang wird, wird der Frame zwar vergrößert, aber
leider nicht ausreichend. kann man das noch verbessern?

Ich hab das +'px' einfach mal in +'0px' oder in +'vh' geändert. Das funktionier zwar gut, aber
dann wird das Frame natürlich übertrieben lang.
Kann man sonst irgendwie z.B. 300px dazu addieren...?

Gruß
Andreas Tallen

Werner schrieb am Montag, den 12 April 2021 #4

Das funktioniert relativ einfach:

1
2
3
4
5
6function fenster() {

 if (parent.document.getElementsByTagName("iframe")[0]) {

  parent.document.getElementsByTagName("iframe")[0].style.height =

   (document.getElementsByTagName("html")[0].offsetHeight +300) +'px';

 }

}

Andreas Tallen schrieb am Dienstag, den 13 April 2021 #5: OK Das funktioniert schon mal gut.
Aber nicht alle Alben haben die gleiche Anzahl an Bilder(Thumbnails)
Das heisst das diese Lösung mit +300 auch pauschal die Framehöhe um 300px vergrößert.

Nun hab ich ein Album mit 56 Thumbs da müsste ich anstatt 300 eben 1200 eintragen.
Und ein anderes Album hat nur 18 Fotos da kann ich es auf 10 einstellen.

Das geht so natürlich nicht so schön...

Gibt es eine alternative zu offsetHeight ?

Ich werde selber daran weiterbasteln...
Vielen Dank!
Gruß
Andreas

Andreas Tallen schrieb am Dienstag, den 13 April 2021 #6: Hab folgendes Script gefunden:
Das funktioniert bei mir einwandfrei...
Trotzdem Danke.!!

professorweb.de/javascr[…]en-v2.html

<iFrame id="bildergalerie" class="iframe_bildergalerie" src="inhalt.htm" width="100%" height="400" frameborder="0" scrolling="no" allowfullscreen></iFrame>

<script type="text/javascript">
var framefenster = document.getElementsByTagName("iFrame");
var auto_resize_timer = window.setInterval("autoresize_frames()", 400);
function autoresize_frames() {
for (var i = 0; i < framefenster.length; ++i) {
if(framefenster[i].contentWindow.document.body){
var framefenster_size = framefenster[i].contentWindow.document.body.offsetHeight;
if(document.all && !window.opera) {
framefenster_size = framefenster[i].contentWindow.document.body.scrollHeight;
}
framefenster[i].style.height = framefenster_size + 'px';
}
}
}
</script>

Silke 122 ✶✶✶✶✶ schrieb am Donnerstag, den 25 November 2021 #7: Das erste Script, das dann auch wirklich funktioniert hat - danke dafür! Ich frage mich, ob es möglich ist, zu verhindern, dass das iframe länger wird als sein Inhalt? Liebe Grüße, Silke

Werner schrieb am Freitag, den 26 November 2021 #8: Dazu habe ich leider kein fertiges Script und auch keinen Vorschlag ... Dann muss halt eine feste Größe des iFrames reichen.

Anmelden