iFrame-Höhe an dessen Inhalt automatisch anpassen

# 15.08.2008 Hier findet Ihr eine Demo, die in FF, IE6 und 7 einwandfrei funktionieren sollte.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<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) {
      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>
</head>

<body>
<iframe src="iframe.html" frameborder="0" style="width:500px; border:1px solid #000"></iframe>
</body>
</html>

Wenn es funktioniert ist unten der Text „Tralalala :D“ zu lesen (ohne das man scrollen muss). Ihr solltet bedenken, dass folgende drei Kriterien erfüllt sein müssen:

  • Der Inhalte vom iFrame muss sich auf dem gleichen Server befinden und darf nicht mit einem externen Pfad (beginnt mit http://) aufgerufen werden sondern nur mit einem absoluten oder relativen Pfad
  • JavaScript muss aktiviert sein
  • Führt man das Script lokal im IE aus, kommt standardmäßig ein Sicherheitshinweis, den man erst bestätigen muss bevor JavaScript ausgeführt wird.

Das Script wurde mehrfach erfolgreich getestet, inklusive in einem kommerziellen CMS.