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

Frezl

Frezl

Erfahrenes Mitglied
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):
HTML: 
<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):
HTML: 
	<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
 
Höhe eines IFrame anpassen bei Ände ...

Hallo

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

Lg Stefan
 
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
 
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
 
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
 
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
Code: 
<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
Code: 
<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
 
Du könntest auch ein Interval setzen, welches die Höhe jede Sekunde prüft und anpasst.

Code: 
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);
}
 
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
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück