# Höhe eines IFrame anpassen bei Änderung des Inhalts durch JS



## Frezl (18. Januar 2011)

Salü allerseits,

hab viel im Internet recherchiert und zwei Möglichkeiten gefunden, die Höhe eines IFrames an den Inhalt anzupassen, sodass nicht mehr vertikal gescrollt werden muss.

Möglichkeit 1 (von der Seite aus, die den IFrame enthält):

```
<script language="JavaScript" type="text/javascript">
		function iFrameHeight(id) {
			var e = document.getElementById(id);
			var h = 0;
			if (!document.all) {
				h = e.contentDocument.height;
				e.style.height = h + 20 + 'px';
			} else if (document.all) {
				h = document.frames(id).document.body.scrollHeight;
				document.all.frames(id).style.height = h + 20 + 'px';
			}
		}
	</script>

[...]

<iframe id="foobar" onload="iFrameHeight('foobar');">
```

Möglichkeit 2 (von der Seite aus, die Inhalt des IFrames ist):

```
<script language="JavaScript" type="text/javascript">
		function iFrameHeight (frame, content) {
			var height = document.getElementById(content).offsetHeight + 20 + 'px';
			parent.document.getElementById(frame).style.height=height;
		}	
	</script>

[...]

<body id="content-site" onload="iFrameHeight('foobar', 'content-site');">
```

Beide Möglichkeiten funktionieren beim Aufruf der Seite problemlos.  Allerdings gibt es auf der Inhalts-Seite einige Divs, die per JS ausgeklappt werden können. Ich habe noch keine Möglichkeit gefunden, wie ich beim Aufklappen die Höhe aktualisieren kann. Mit der 2. Möglichkeit und dem gleichen Script im onfocus müsste es eigentlich gehen, tut es aber nicht. Kann es sein, dass JS nur auf das Original-DOM zugreift und nicht auf das durch JS geänderte?

Wie kann ich auf das geänderte DOM zugreifen?

Gibt es auch eine Möglichkeit, mit Möglichkeit 1 zum Ziel zu kommen?

Würde mich über Tipps freuen.

Grüße,
Fred


----------



## stef03 (18. Januar 2011)

*Höhe eines IFrame anpassen bei Ände ...*

Hallo

Versuxh einfach den iFrame tag mit width="" und height="" zu ergänzen.

Lg Stefan


----------



## Frezl (19. Januar 2011)

Hey Stefan,

was sollte das bewirken?

Ich habe width="100%" eingestellt und das soll auch so bleiben, da ich die Breite nicht dynamisch einstellen will, da unnötig.

height="" ändert nichts am bisherigen Verhalten.

Hast du noch ne andere Idee?

Grüße,
Fred


----------



## Frezl (19. Januar 2011)

Ich hab jetzt mit verschiedenen Event-Handlern im body-Tag rumgespielt, die aber alle nicht 100%-ig zum gewünschten Ergebnis geführt haben.

Mit onmouseup, onclick, etc. funktioniert es zwar, wenn man auf eine beliebige Fläche in der Seite klickt. Wenn ich aber ausgerechnet auf den Drop-Down-Pfeil klicke, durch den die Höhe der Seite verändert wird, passiert leider nichts :-(

Gibt's irgend ne Möglichkeit, Änderungen am DOM laufend zu überprüfen und auf eine Änderung zu reagieren?

Viele Grüße,
Frezl


----------



## stef03 (19. Januar 2011)

*Höhe eines IFrame anpassen bei Ände ...*

Sorry fred,

Hab leider sonst keine Idee. 
Ich dachte so hab ich das einmal gemacht. 
Hab mich wohl geihrt.

Lg Stefan


----------



## Frezl (19. Januar 2011)

Hey Stefan,

macht nix, ich versuchs weiter ;-)

Grüße,
Fred


----------



## Quaese (20. Januar 2011)

Hi,

wenn du das Aufklappen der DIVs im iFrame-Dokument mit JavaScript realisierst, kannst du doch am Ende der Routine das Anpassen des iFrames anstossen.

Beispiel:

Hauptdokument

```
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
  <!--
 //-->
</style>
<script type="text/javascript">
<!--
function iFrameHeight(id) {
  var e = document.getElementById(id);
  var h = 0;
  if (!document.all) {
    h = e.contentDocument.height;
    e.style.height = h + 20 + 'px';
  } else if (document.all) {
    h = document.frames(id).document.body.scrollHeight;
    document.getElementById(id).style.height = h + 20 + "px";
  }
}
//-->
</script>
</head>
<body>
<iframe src="iframe_doc.html" id="foobar" onload="iFrameHeight('foobar');">
</body>
</html>
```
iFrame-Dokument

```
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!--
function resizeDiv(){
  var objDiv = document.getElementById("divId");
  var intH   = parseInt(objDiv.style.height) + 4;

  if(intH < 400){
    objDiv.style.height = intH + "px";
    window.setTimeout(function(){resizeDiv();}, 30);
  }else{
    parent.iFrameHeight('foobar');
  }
}
//-->
</script>
</head>
<body>
<button onclick="resizeDiv();">resizeDiv</button>
<div id="divId" style="height: 40px; background: #900;">&nbsp;</div>
</body>
</html>
```
Ciao
Quaese


----------



## hoctar (20. Januar 2011)

Du könntest auch ein Interval setzen, welches die Höhe jede Sekunde prüft und anpasst.


```
function iFrameHeight(id) {
    var e = document.getElementById(id);
    var h = 0;
  
    setInterval(function() {
        if(!document.all) {
            h = e.contentDocument.height;
            e.style.height = h + 20 + 'px';
        } else if (document.all) {
            h = document.frames(id).document.body.scrollHeight;
            document.getElementById(id).style.height = h + 20 + "px";
        }
    }, 1000);
}
```


----------



## Frezl (31. März 2011)

Hey hoctar,

hab mich nach langer Zeit mal wieder mit dem Problem beschäftigt und deine Lösung gefällt mir sehr  Zumindest ist es bis jetzt die einzige, die das von mir gewünschte Resultat liefert. Damit keine Scrollbalken aufblitzen hab ich allerdings das Intervall auf 10 (Millisekunden?) runtergestellt. Könnte mir vorstellen, dass das ziemlich auf den Prozessor geht.

Daher gefällt mir Quaeses Vorschlag vom Ansatz her eigentlich besser. In die bestehenden Funktionen selbst will ich aber nichts reinschreiben, wie Quaese das vorgeschlagen hat, da es sich um ein fertiges CMS handelt, in dem ich nicht rumpfuschen will. Gibt es irgendwie ne Möglichkeit, dass die Funktion automatisch ausgeführt wird, nachdem eine beliebige andere JS-Funktion ausgeführt wurde? Dass praktisch das Skript alle Aktionen überwacht und nach einer Änderung am DOM sofort die iFrameHeight-Funktion ausführt.

Viele Grüße,
Frezl


----------

