Druckversion des Themas

Hier klicken um das Topic im Orginalformat anzusehen

rt-designs.de _ HTML / JS / CSS / XML _ [JS/HTML] iFrame Höhe automatisch an Inhalt anpassen

Geschrieben von: jan Jan 12 2011, 16:54 PM

Von http://www.professorweb.de/javascript-ajax/iframe-hohe-an-dessen-inhalt-automatisch-anpassen.html

Mit diesem Javascript wird die Höhe des iFrames automatisch in 400ms Schritten an den Inhalt des selbigen angepasst.

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


Das ganze Vorhaben funktioniert nur dann, wenn sich die Datei des iFrame und die Datei die im iFrame aufgerufen wird, auf der gleichen Domain befindet, da sonst die https://secure.wikimedia.org/wikipedia/de/wiki/Same_Origin_Policy (Same Origin Policy) zuschlägt. Wir setzen es eigentlich bei allen http://www.rt-designs.de/webdesigndarmstadt.html ein.

Ändert sich der Inhalt in dem iFrame, wird zum Beispiel länger oder kürzer, passt sich das iFrame alle 400 Millisekunden daran an. Dafür sorgt diese Zeile:

Unterstützt von Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)