Über mich

Startseite arrow Tipps & Tricks arrow iFrame-Höhe an dessen Inhalt automatisch anpassen v2

iFrame-Höhe an dessen Inhalt automatisch anpassen v2
Montag, 10. November 2008
Geschrieben von Armin Vieweg
Ich habe darüber schon mal berichtet, jedoch traten immer wieder Fehler im Internet Explorer auf. Hier nun eine ausführlichere Beschreibung, wie man vertikale Scrollbalken in iFrames durch automatische Höhenanpassung vermeidet.

In den Kommentaren meines ersten Artikels zu diesem Script, ließt man häufig das es im Internet Explorer einfach nicht klappen möchte. Am vergangenen Wochenende erreichte mich eine E-Mail mit der Bitte mich diesem Problem anzunehmen.

Erste Spekulationen und Tipps zum Ausbessern brachten leider nichts. Der Teufel liegt eben doch im Detail, weshalb ich diese Erfahrungen in einem separaten Artikel noch mal kundtun möchte.



Das JavaScript
Als erstes muss das Herzstück im Head-Bereich der Website platziert werden. Einfach den folgenden Code zwischen <head> und </head> kopieren.

<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>




Der iFrame
Mit dem JavaScript haben wir schon die halbe Miete. Beim iFrame selbst, müssen jedoch auch einige Punkte berücksichtigt werden, damit das Script auch im Internet Explorer einwandfrei funktionieren kann.

<iFrame src="ordner/datei.html" style="width:600px; height:200px; border:none;" frameborder="0" name="irgendwas" scrolling="no"></iFrame>



Beim Platzieren des iFrames auf der eigentlichen Seite muss man folgendes beachten:
- Eine Höhe ist angegeben
- Die Schreibweise von "iFrame" ist absolut identisch mit der Schreibweise aus dem JavaScript
- Der Pfad zur Datei im "src" befindet sich auf der gleichen Domain. Subdomains gelten als neue Domain. Am Besten verwendet man hier relative oder absolute Pfade zur jeweiligen Datei, ohne vorne dran ein "http://" zu schreiben
- Es bietet sich an im Standardkonformen-Modus zu arbeiten. Sind wir außerhalb dieses Modus kann es zu Fehlern kommen. Um diesen Modus zu erhalten ist ein vollständiger und korrekter DocType notwendig


Der Inhalt des iFrame
Beim Inhalt des iFrame sollte man ebenfalls einige Punkte beachten, damit das JavaScript auch die Möglichkeit hat eindeutig die Höhe der Elemente zu errechnen.

- Der Body der Datei im iFrame sollte über CSS einen Margin-Wert haben. z.B. "margin:10px 0;"
- P-Tags und H-Tags (H1, H2, etc.) sollten ebenfalls einen Margin-Wert zugewiesen haben, falls sie verwendet werden. z.B. "margin:0 0 10px;"



Und es funktioniert doch!
Sind diese ganzen Punkte berücksichtigt, steht dem scrollbalkenfreiem iFrame-Vergnügen nichts mehr im Wege. Dieses Script funktioniert schon mehrfach als Ergänzung eines kostenpflichtigen CMS-Systems in allen gängigen Browsern. Einzige Voraussetzung ist aktiviertes JavaScript.

Nun sollten alle Zweifel und Stolpersteine aus dem Weg geräumt sein.

Vielen Dank an Sabine!
Sie hat mich darauf gebracht das Thema "Automatische iFrame-Höhe" noch mal neu aufzugreifen.


Verwandte Artikel

iFrame-Höhe an dessen Inhalt automatisch anpassen




  Kommentare (49)
 1 Geschrieben von: Akahito, am 04.06.2009 um 21:21
Hi! 
 
Ich möchte mich bei dir bedanken! 
Du hast mir und meiner Seite wirklich geholfen. Endlich habe muss ich die height nicht mehr angeben, da dies durch das hier automatisch angepasst wird. 
 
Danke!
 2 Geschrieben von: Poetker, am 22.06.2009 um 18:31
Jup, ist eine ziemlich klevere Lösung... 
Es funktioniert... nur nicht im Opera!? 
Woran könnte das liegen?
 3 Geschrieben von: Armin Vieweg, am 22.06.2009 um 19:35
Ich würde mal raten, dass der Opera Browser nichts mit  
".contentWindow.document.body.offsetHeight" oder .scrollHeight anfangen kann.  
 
Allerdings muss ich auch gestehen, dass ich diese Lösung nicht im Opera-Browser getestet habe, da die Verbreitung relativ gering im Verhältnis zum dahinterstehenden Aufwand steht. 
 
Gegebenfalls kann es sogar sein, dass der Opera-Browser diese Lösung aus Sicherheitsgründen komplett sperrt. Gibt es denn eine Fehlermeldung im Operabrowser, welcher der Befehle nun keine Wirkung zeigt? 
 
Gruß 
Armin
 4 Geschrieben von: Poetker, am 06.07.2009 um 14:47
Nein der Iframe wird bei der eingegeben Höhe abgeschnitten, gibt man keine Höhe ein, bleibt er bei ca. 100px Größe... 
Wenn man in das Feld mit dem Cursor fährt und scrollt, bewegt sich der Inhalt... 
 
LG Poetker
 5 Geschrieben von: Daniel, am 09.07.2009 um 12:34
Hi,  
das ist das erste Script welches bei mir funktioniert und ich 
schaue schon seit 2 Tagen :-( Leider hab ich ein Problem 
mit dem Mozilla Firefox 3.0 -> dort nimmt er wie es scheint 
die höhe der 1. src und verändert danach nix mehr... Im IE 
klappts spitze... 
 
Bei mir ist der iframe innerhalb eines divs mit auto höhe... 
 
Wenn jemand was weiss wär ich echt froh. 
 
LG vom Bodensee
 6 Geschrieben von: Armin Vieweg, am 09.07.2009 um 15:06
Hi Daniel, 
mir ist kein Fehler im Firefox bekannt. Schick mir doch mal die URL (am besten per Mail), dann schaue ich es mir gerne mal an. 
 
Gruß 
Armin
 7 Geschrieben von: Daniel, am 09.07.2009 um 16:23
Hier hinterlasse ich doch gerade noch ein 
ganz fettes MERCI an Armin der sich meines 
Problems nicht nur angenommen hat sondern 
es gelöst hat... 
 
LG vom Bodensee 
 
Daniel
 8 Geschrieben von: domme, am 23.08.2009 um 14:37
vielen dank!
 9 Geschrieben von: JanC, am 18.10.2009 um 23:56
Nach sowas habe ich schon ewig gesucht. 
Wow ,Echt gute Arbeit. Vielen Dank ! 
 
gruß, Jan
 10 Geschrieben von: DanielG, am 27.10.2009 um 12:38
Hallo, 
 
irgendwie funktioniert das Script bei mir nicht. 
Ich habe mal als Debug ein paar Alerts eingebaut und da bekomme ich immer den Initialisierungswert (200px) als Höhe heraus (egal ob mit offsetHeight oder scrollHeight). 
 
Ich benutze IE7 und FF3, an was kann das liegen? 
 
Gruß, 
DanielG
 11 Geschrieben von: Armin Vieweg, am 27.10.2009 um 16:01
An soooooo vielem. Deswegen empfehle ich mir über Kontakt ne Nachricht zu schicken mit einem Link zu dem Problem. 
 
Da es in keinem Browser funktioniert würde ich zwei Dinge vermuten: Irgendwo im JavaScript einen Fehler. Das könnte man mit der Firebug Console mal prüfen 
 
Oder Du rufst im iFrame einen externen Inhalt auf. Also etwas was nicht auf der gleichen Domain liegt, wie der iFrame selbst. Dabei reicht auch schon mit www. und ohne um einen Unterschied zu haben und Subdomains werden auch als extern gewertet. 
 
Wenn nichts davon zutrifft, dann schreib mir bitte nochmal ne Mail. 
 
Vielen Dank und schönen Gruß 
Armin
 12 Geschrieben von: Michael, am 10.12.2009 um 09:01
Herzlichen Dank! Genau das hab ich schon lange gesucht.
 13 Geschrieben von: Christian, am 29.12.2009 um 18:51
Hallo, 
 
klappt super, ich würde nur gerne eine externe seite einbinden. hättest du dafür auch eine Lösung? 
 
Vielen Dank 
Chris
 14 Geschrieben von: Armin Vieweg, am 29.12.2009 um 19:54
Hallo Chris, 
 
eine solche Lösung gibt es. Ist auch unter dem Artikel (und über den Kommentaren) verlinkt. Ein alter Beitrag zu dem Thema. In der Mitte des Artikels findest Du die Beschreibung für externe Seiten. 
 
ABER: Du musst auf der externen Seite dafür ein JavaScript eingebettet haben. Nur dann funktioniert das. Man kann also nicht x-beliebige Seiten wie z.B. Google und Co. im iFrame automatisch anpassen lassen. 
 
Hoffe weitergeholfen zu haben. 
Guten Rutsch! 
 
Armin
 15 Geschrieben von: Silvio Segner, am 09.04.2010 um 19:24
Ich möchte jetzt auch hier noch einmal einen dickes Dankeschön an Armin senden. 
Die schnelle und unkomplizierte Hilfe bei meinem Problem mit dem einbinden des Scripts fand ich einfach super. 
Es gibt nur Wenige die ihr Wissen so selbstlos mit Anderen teilen. 
Jetzt wo ich diese Seite entdeckt habe, werde ich hier mal öffter reinschaunen. 
Nochmals Danke Armin 
 
Gruß. 
Silvio
 16 Geschrieben von: Zotemano, am 15.05.2010 um 13:47
Hey. Danke für das tolle Script. Habe da mal eine Frage an dich. Also ich biete auf meiner Website eine Witzbox an, und verwende dein Script. Damit es bei den anderen Usern auch klappt, müsste ich dein Script ebenfalls mit angeben.  
Hast du etwas dagegen? Ansonsten muss ich mir etwas anderes einfallen lassen. 
 
LG Zotemano 
 
Bitte deine Antwort an zotemano@hotmail.de
 17 Geschrieben von: Christoph, am 10.08.2010 um 18:12
Vielen Dank Armin für diese wunderbare Anleitung und die offenlegung deines Scripts. 
Danach habe auch ich jetzt schon einige Stunden gesucht und jetzt habe ich meine Suche hier vorerst beenden können. Im Internetexplorer funktioniert das ganze wunderbar - im Firefox allerdings blinkt der Frame nur ganz kurz auf woraufhin er dann scheinbar verschwindet. Evtl. wird die höhe hierbei auf 0px veringert?! 
Hat hier jemand einen Rat für mich? 
Vielen vielen Dank schonmal, 
Grüße, 
Christoph
 18 Geschrieben von: Armin Vieweg, am 13.08.2010 um 14:57
Hallo Christoph, 
 
ich vermute wie Du, dass die Höhe auf 0 Pixel gestellt wird. Als ich diesen Fehler das letzte mal gesehen habe, lag es am Code der Seite im iFrame. Generell sollte diese Seite bei einem Validitätscheck keine Fehler oder Warnungen haben - wenn das nichts hilft, schick mir doch einfach mal eine E-Mail mit der konkreten Seite, dann helfe ich gerne weiter. 
 
Gruß 
Armin
 19 Geschrieben von: Mario, am 11.10.2010 um 14:49
Hallo Armin, 
 
vielen Dank für die ausführliche Beschreibung. Aber lässt sich Deine Methode auch in CMS-Seiten wie Wordpress und Joomla anwenden? Muss dann der JavaScript-Teil in die Index.php und wirkt sich das nicht negativ auf den Rest der Seite aus? 
 
Danke im Voraus.
 20 Geschrieben von: Anna, am 05.11.2010 um 18:52
Hallo Armin 
 
Dein Script ist super! Nun, wie sieht es aus mit externen-Inhalten? 
 
src="http://...." ergibt nix. 
 
Danke und Gruss 
Anna
 21 Geschrieben von: Peter, am 14.12.2010 um 15:54
Hallo Armin, 
 
ich habe mich auch Deines Skriptes bedient und eine externes Gästebuch auf meiner Homepage mittels eines iFrames eingebunden. leider funktioniert das ganze nicht, der Scrollbalken ist zwar weg, jedoch werden die Einträge bei Erreichen der vorgegebenen Höhe im iFrame einfach abgeschnitten. Ich schicke mal die URL per Kontaktformular... schon mal DANKE! 
 
Grüße, 
Peter
 22 Geschrieben von: Addy, am 20.12.2010 um 10:49
Hallo Armin, 
Danke dir erstmal für diesen Beitrag. 
2 Sachen wollte ich Fragen. 
-Ich habe den script über Tomcat laufenlassen. Mit IE9beta läuft es super, ABER mit Firefox funktioniert es nicht. 
-Wie kann man diesen Code auch für automatische Breite umsetzen (offsetWidth)??? 
Kann man beide gleichzeitig einsetzen?
 23 Geschrieben von: Markus, am 30.12.2010 um 22:05
Ich würde gerne eine externe Seite einbinden. Kann mir einer bitte erklären was ich dafür verändern muss ;D 
 
Danke sehr 
 
Markus
 24 Geschrieben von: Manfred, am 21.01.2011 um 13:20
Hallo Armin 
 
Glücklicherweise bin ich auf der Suche nach einer Lösung für automatische Anpassung der Höhe eines iframe auf Dein Script gestossen, das in jedem gängigen Browser funktioniert, sogar im IE, aber leider nicht im Firefox.. 
 
Damit der Shop im iframe angezeigt werden kann, musste ich per css für den firefox über overflow:auto; die Scrollbalken anzeigen. 
 
Gibt es eine Möglichkeit, für den Firefox das iframe ohne Scrollbalken darzustellen? 
 
Besten Dank für Dein Script und Deine Hilfe. 
 
Gruss Manfred
 25 Geschrieben von: Armin Vieweg, am 21.01.2011 um 13:39
Hallo Manfred, 
 
man kann über CSS overflow:hidden; oder über das iframe-Attribut scrolling="no" die Scrollbalken prinzipiell deaktivieren. 
 
Allerdings glaube ich wird Dir das nicht helfen, da Du ja explizit den Firefox als störende Quelle erwähnt hast. 
 
Was genau ist denn der Grund für Deine Frage? Vielleicht hast Du auch einen Link für mich, zum gucken?  
 
Du kannst Du mir, wenn Du möchtest auch schnell eine E-Mail schicken :) 
 
Gruß 
Armin
 26 Geschrieben von: nerd, am 11.03.2011 um 07:53
klappt nicht
 27 Geschrieben von: OL_O, am 10.05.2011 um 13:05
Bei mir klappt es super. (IE8, FF 4) nur der Opera 11.10 zickt wie oben beschrieben rum.
 28 Geschrieben von: OL_O, am 10.05.2011 um 14:03
Mein Opera Problem habe ich damit gelöst: 
if (window.opera) 
framefenster_size = framefenster[0].contentWindow.document.documentElement.clientHeight; 
 
einfach nach der !window.opera abfrage eingefuegt. 
 
Vielen Dank für den ursprungscode!
 29 Geschrieben von: Felix, am 02.06.2011 um 10:02
Wirklich sehr schönes Script, hat mir geholfen, meine Seite zu vervollständigen. Einzig und allein stören, ist die nötige Umbenennung des iframe-Tags zu "iFrame"... das geht garnicht und zerstört die Validität. 
Meine persönliche Abhilfe ist, das Javascript direkt zu ändern und alle korrekt geschriebenen Tags auszuwählen. 
var framefenster = document.getElementsByTagName("iframe"); 
Dann ist es auch XHTML-valide. Jedoch nicht getestet mit mehreren Iframes auf einer Seite.
 30 Geschrieben von: Mario, am 18.06.2011 um 00:20
Habe einen zweiten Iframe im Programm. Wenn ich die automatische Höhe starte, dann verschwindet mein zweites Iframe. Warum?? und wohin??
 31 Geschrieben von: Armin, am 18.06.2011 um 06:05
Hm, ich vermute es hängt nicht damit zusammen, dass es der zweite iFrame ist, sondern am Inhalt des iFrames. Kannste ja mal testen, indem Du das erste iFrame auskommentiest. Meistens passieren solche Fehler, wenn im iFrame selbst irgendwas nicht valide ist. Das würde ich auch noch checken.  
 
Ist das auch okay, schreib mir doch mal ne Mail mit nem Link zur Seite, dann schaue ich mir das mal an. 
 
Gruß 
Armin
 32 Geschrieben von: Goteach, am 29.07.2011 um 13:26
Vielen Dank für diesen tollen Tipp!!!
 33 Geschrieben von: Tobias, am 13.08.2011 um 05:45
Perfekt, danach habe ich ewig gesucht. 
Vielen Dank für diese Lösung.
 34 Geschrieben von: Dieter, am 21.08.2011 um 00:22
Hallo, dein Skript hat mir sehr gut gefallen. Finde ich auch Klasse. Aber eine Frage habe ich noch. Kann man das irgendwie so einstellen, dass wenn das iframe trotz der automatischen Höhe größe sein sollte als 600px, dass er ab dann stoppen soll und die Balken öffnen soll? 
 
Also, so dass er bis zu 600px automatisch angepasst wird, und ab den 600px soll ein Scrollbar erscheinen und soll nicht mehr länger werden?
 35 Geschrieben von: Armin Vieweg, am 21.08.2011 um 22:38
Hallo Dieter, 
das geht recht einfach. Die folgende Zeile einfach mit einer If-Abfrage umschließen: 
 
if (framefenster_size
 36 Geschrieben von: Johannes Seyffert, am 18.09.2011 um 17:49
schwarzes Kästchen auf jeder Seite!!! 
 
Hallo, das Skipt funktioniert wirklich! :-) 
Aber bei mir wird unter verschiedenen Browsern immer ein schwarzes Kästchen Dargestellt auf jeder Seite. Habe auf meiner Seite 3 iFrames die sich jeweils in einer Tabellenspalte befinden eingebunden. Scrollen Funktioniert wie beschrieben wunderbar, nur das schwarzes Kästchen springt je nach fülle der Informationen der einzelnen Frames in den Tabellen von einer Tabellenspalter zur anderen. Bitte mal nachsehen: http://www.johannes-seyffert.de/ 
Für jede Hilfe wäre ich sehr Dankbar!!!
 37 Geschrieben von: Johannes Seyffert, am 18.09.2011 um 18:17
hat sich erledigt! Nach 10 Stunden Programmieren kann man wohl mal das einfachste Übersehen :-)  
Es lag an bgcolor vom Table.
 38 Geschrieben von: Umberto, am 07.10.2011 um 07:21
Leider funktioniert diese Methode irgendwie nicht im Chrome...woran kann das liegen?
 39 Geschrieben von: Alex, am 14.12.2011 um 14:00
Klappt wunderbar - sogar im IE! 
Vielen dank für diese Lösung 
 
Gruß 
 
Alex
 40 Geschrieben von: René Steiger, am 19.12.2011 um 17:02
Google, google, google, ........ 
Endlich!! Danke Armin, klappt bestens beim Anzeigen von html-Seiten. 
Mein Problem: Beim Anzeigen einer pdf-Datei behält das iframe seine letzte berechnete Höhe. 
Ebenso eine in Excel ertellte und als htm-Seite abgespeicherte Datei. 
 
Gibt es eine Lösung für dieses Problem? 
 
Gruss René
 41 Geschrieben von: Armin Vieweg, am 20.12.2011 um 09:39
Vermutlich nicht! Also PDF-Dateien werden ja in einem Plugin dargestellt und das kann von Browser zu Browser variieren. Wenn es Fehler mit einem Excel-Export als HTML gibt, ist meine erste Vermutung, dass das HTML nicht valide und damit standardkonform ist. Das würde ich mal prüfen, Microsoft ist nicht für ihr sauberes HTML bekannt ^^
 42 Geschrieben von: Linda, am 24.12.2011 um 11:28
Bei mir klappt es seltsamerweise nicht im IE, im Safarie und Firefox funktioniert es aber.. 
=(
 43 Geschrieben von: Marius, am 08.01.2012 um 01:33
Hey :) 
Erst einmal noch ein schönes 2012! 
 
Das Script ist wirklich super und funktioniert sogar mit Wordpress :) 
 
Danke!
 44 Geschrieben von: SlippyStoat, am 27.01.2012 um 09:08
Ganz nett, aber Polling ist keine schöne Lösung. Die Lösung hat mich nicht zufrieden gestellt und es gibts tatsächlich was viel eleganteres. 
 
Quelle:  
http://stackoverflow.com/questions/819416/adjust-width-height-of-iframe-to-fit-with-content-in-it 
 
Grüße
 45 Geschrieben von: Armin Vieweg, am 27.01.2012 um 11:12
Jo, nur das mein Script die iFrame Höhe permanent aktualisiert, also auch wenn sich im iFrame Inhalte ändern (das ist ja heutzutage mit Tabs, Accordions, etc schnell passiert). 
 
Wenn man das nicht braucht, ist eine Lösung ohne Interval natürlich besser.
 46 Geschrieben von: Andreas, am 18.02.2012 um 13:13
Danke, danke, danke! 
Das ist wirklich sehr genial! 
Viele Grüße aus Thüringen
 47 Geschrieben von: Dominik, am 07.03.2012 um 18:48
Danke, Danke, Danke! 
Endlich hab ich gefunden was ich gesucht habe! Bisschen Seite anpassen - nicht das Script - und die Seite sieht aus wie gewünscht.
 48 Geschrieben von: Joey, am 06.04.2012 um 10:21
Hallo, 
 
kann man das Script auch so anpassen, dass das iframe immer min. 400 px hoch ist und erst angepasst wird, wenn es größer ist als 400 px? Ich habe das Problem, dass ich auf einer Seite in dem iframe noch ein Frameset habe, das ja keinen body-Teil hat. Deswegen wird das Fenster immer zu klein angezeigt.
 49 Geschrieben von: Joshua, am 03.07.2012 um 17:19
Gent nicht! 
 
Gibt nur Fehlermeldungen, weil der Inhalt NICHT ausgelesen wird, weil der Wert "null" ist! (FF13) 
 
Und überhaupt: javascript kann nix! 
 
Mit nem VB-Script mach ich sowas in 30 Sekunden... -.-
Letzte Aktualisierung ( Mittwoch, 12. November 2008 )
 
< Zurück   Weiter >



Tipps & Tricks Kategorien

Beliebteste Tipps