iFrame-Höhe mittels jQuery an den Inhalt anpassen

Kategorie: Javascript
Publikationsdatum: 08.08.2011
Jeder kennt das Problem der fixen Höhe bei iFrames. Wird ein iFrame in die Seite eingefügt, muss man diesem eine fixe Höhe zuweisen. Ist der Inhalt des iFrames aber höher als die gesetzte Höhe, erhält man unschöne Scrollbalken.
Mittels jQuery lässt sich dies nun sehr einfach umgehen. Diese Lösung funktioniert aber nur, wenn der iFrame-Inhalt und die Seite, auf welcher der iFrame eingebunden wird, von derselben Domain kommen.

Als erstes wird im head der Seite das jQuery eingebunden.
HTML
  1. <script type="text/javascript" language="javascript" src="/fileadmin/js/jquery.js"></script>
Als nächstes wird dann das jQuery-Plugin iFrame auto height, ebenfalls im head, eingebunden.
HTML
  1. <script type="text/javascript" language="javascript" src="/fileadmin/js/jquery.iframe-auto-height.plugin.js"></script>
Nun fehlt nur noch der iFrame. Mittels dem untenstehenden Code werden alle iFrames auf der aktuellen Seite an den Inhalt angepasst.
HTML
  1. <iframe src="http://www.vorarlbergermehl.at/shop/" frameborder="0" scrolling="auto" width="960" name="Shop"></iframe>
  2.  
  3. <script type="text/javascript" language="javascript">
  4. $('iframe').iframeAutoHeight();
  5. </script>
Man kann aber auch nur die iFrames, welche eine bestimmte Klasse gesetzt bekommen haben, anpassen. Dies geschieht folgendermaßen:
HTML
  1. <iframe src="http://www.vorarlbergermehl.at/shop/" frameborder="0" class="autoHeight" scrolling="auto" width="960" name="Shop"></iframe>
  2.  
  3. <script type="text/javascript" language="javascript">
  4. $('iframe.autoHeight').iframeAutoHeight();
  5. </script>
Stichwörter: JavaScript, jQuery, iFrame, Inhalt, Höhe
 
 
NACH OBEN