✔ iFrame Höhe dynamisch anpassen

anve · 23. August 2011

Hi,

mein Problem ist nicht neu und ich habe auh schon viel gegoogelt. Ich habe z.B. auch
http://www.tutorials.de/javascript-ajax/332084-iframe-dynamisch-machen.html
http://www.dreamworker.de/showthread.php?25764-in-DIV-eingebetter-Iframe-und-dynamische-Höhe
ausprobiert, jedoch funktioniert keines der Beispiele (die Demos schon).

Gibt es ein funktionierendes Script?

Javascript:

<script type="text/javascript" language="JavaScript">
		<!--
		/**
			* THX an Quaese fr Ausbesserung des Codes
			* http://www.tutorials.de/forum/members/quaese.html
		**/
		function resize_me(n){
			d=10;

			ifObj=document.getElementsByName(n)[0];

			p=(document.all)?'scroll':'offset';

			// w = (W3C-DOM)? Breite in px : ((IEs)? Breite in px : Breite in px sonstige Browser)
			w = (window.getComputedStyle)? window.getComputedStyle(ifObj, null).getPropertyValue('width') :
										((ifObj.currentStyle) ? ifObj.currentStyle['width'] : eval("window.frames[n].document.getElementsByTagName('body')[0]."+p+"Width+"+20+"+'px'"));

			ifObj.style.width = w;
			eval("ifObj.style.height=Math.max(200,window.frames[n].document.getElementsByTagName('body')[0]."+p+"Height+"+d+")+'px'");
		}
		//--> 
		</script>

Mutter-Dokument:

HTML:

<div id="Content">
			<iframe name="iFrameContent" style="height:300px; width:630px; padding: 0; margin: 0;" src="./anfrage.html"
				marginheight="0" marginwidth="0" frameborder="0" scrolling="no">
			<p>Keine Frames: <a href="./test.html">Anfrage</a></p>
		</iframe>
	</div>

iframe

HTML:

	<body onload="parent.resize_me('iFrameContent')">
		<div id="inhalt">
			<h1>Test</h1>
                 </div>
        </body>

SpiceLab · 23. August 2011

anve hat gesagt.:
jedoch funktioniert keines der Beispiele (die Demos schon).

Gibt es ein funktionierendes Script?

Jo, der vorherigen Aussage zufolge, ganz offensichtlich in den Demos, wie z.B. http://www.doktormolle.de/temp/iframe_resize2/ ;-)

Vielleicht ist mit der alleinigen Überschrift schlichtweg zu wenig Inhalt im iFrame vorhanden?! Im JS ist eine Art Mindesthöhe von 200px voreingestellt.

Na, und deine height-Regel (mit fixem Wert bei gewünschter dynamischer Höhe!) ist im funktionstüchtigen Original auch nicht zu entdecken:

HTML:

<iframe style="height:300px;...>

Quaese · 23. August 2011

Hi,

ausserdem funktioniert das Script - du musst nur den Inhalt im iFrame hoch genug machen. Denn sonst werden die 200 Pixel aus der Math.Max-Methode als Default-Höhe gesetzt.

Ciao
Quaese

anve · 23. August 2011

spicelab hat gesagt.:
Vielleicht ist mit der alleinigen Überschrift schlichtweg zu wenig Inhalt im iFrame vorhanden?! Im JS ist eine Art Mindesthöhe von 200px voreingestellt.

Nein, es ist natürlich mehr Inhalt. Ich hab es einfacher halber gekürzt. Aber hier die längere Version:

HTML:

<body onload="parent.resize_me('iFrameContent')">
		<div id="inhalt">
			<h1>Test</h1>
			<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt voluptua.
			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt voluptua.
			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt voluptua.
			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt voluptua.
			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt voluptua.
			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt voluptua.
			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt voluptua.
			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt voluptua.
			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt voluptua.
			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt voluptua.
			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt voluptua.
			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt voluptua.
			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt voluptua.
			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt voluptua.
			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt voluptua.
			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt voluptua.
			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt voluptua.
			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt voluptua.
			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt voluptua.
			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt voluptua.
			</p>
			
		</div>
	</body>

spicelab hat gesagt.:
Na, und deine height-Regel (mit fixem Wert bei gewünschter dynamischer Höhe!) ist im funktionstüchtigen Original auch nicht zu entdecken:

HTML:

<iframe style="height:300px;...>

Verstehe ich jetzt nicht. Auszug aus dem Original:

HTML:

<iframe scrolling="no" src="a.htm" name="content" style="width: 300px; height: 200px;">

Sind das deine anfangs erwähnten 200px Mindesthöhe? Also die Höhe auf der er zurückfällt?

Im Anhang habe ich einen Screenshot gemacht. Der Bereich ist kleiner als 200px ...

@Quaese:
Der Inhalt ist groß genug. Vielleicht ist eine andere Einstellung die da was reinpfuscht. Ich werde mal nur den hier von mir geposteten Code nehmen und es ausprobieren ...

Edit:
Ich hatte im obigen Beispiel das onload vergessen. Komischerweise funktioniert es mit diesem Beispiel. Mein Inhalt aber hat ein Formular und zwei Bereiche (links, rechts). Kann er deshalb die Höhe nicht berechnen?

HTML:

<body onload="parent.resize_me('iFrameContent')">
		<div id="inhalt">
			<h1>Test</h1>
			<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt voluptua.</p>
			<form id="formular" name="formular" method="post" action="">
				<div id="left">
					<h2>test</h2>
					<input name="foo" type="text" size="26" maxlength="10">
					<input name="foo" type="text" size="26" maxlength="10">
					<input name="foo" type="text" size="26" maxlength="10">
					<input name="foo" type="text" size="26" maxlength="10">
					<input name="foo" type="text" size="26" maxlength="10">
					<input name="foo" type="text" size="26" maxlength="10">
				</div>
				<div id="right">
					<h2>blub</h2>
					<input name="foo" type="text" size="26" maxlength="10">
					<input name="foo" type="text" size="26" maxlength="10">
					<input name="foo" type="text" size="26" maxlength="10">
					<input name="foo" type="text" size="26" maxlength="10">
					<input name="foo" type="text" size="26" maxlength="10">
					<input name="foo" type="text" size="26" maxlength="10">
					<input name="foo" type="text" size="26" maxlength="10">
					<input name="foo" type="text" size="26" maxlength="10">
					<input name="foo" type="text" size="26" maxlength="10">
					<input name="foo" type="text" size="26" maxlength="10">
					<input name="foo" type="text" size="26" maxlength="10">
					<input name="foo" type="text" size="26" maxlength="10">
				</div>
			</form>
		</div>
	</body>

SpiceLab · 24. August 2011

spicelab hat gesagt.:
Na, und deine height-Regel (mit fixem Wert bei gewünschter dynamischer Höhe!) ist im funktionstüchtigen Original auch nicht zu entdecken:

HTML:

<iframe style="height:300px;...>

anve hat gesagt.:
Verstehe ich jetzt nicht. Auszug aus dem Original:

HTML:

<iframe scrolling="no" src="a.htm" name="content" style="width: 300px; height: 200px;">

Die Zeile hast du in "Firebug" herauskopiert, der lediglich in einem Inline-Style die aktuellen CSS-Parameter des Elements zurück-/ausgibt.

Beim Aufruf von "b.htm" lauten diese darin:

HTML:

<iframe scrolling="no" src="a.htm" name="content" style="width: 300px; height: 218px;">

und für "c.htm":

HTML:

<iframe scrolling="no" src="a.htm" name="content" style="width: 300px; height: 322px;">

Schau dir zum Vergleich mal besser den "Original-Code" des Dokuments an.

HTML:

<iframe name="content"src="a.htm"scrolling="no">:o(</iframe>

anve · 24. August 2011

Hallo spicelab!

Ich hab die Seite runtergeladen und es steht auch eine Höhe drinnen. Wenn man aber auf Seitenquelltext geht, dann sieht man deine letzte Zeile. Auch wenn ich die Höhe wegtue bleibt dasselbe Ergebnis. Ich bin immer noch der Meinung, dass an dem Code liegt, sprich es nicht bei jeder Art von Inhalt funktioniert!

HTML:

<body onload="parent.resize_me('iFrameContent')">
		<div id="inhalt">
			<h1>Test</h1>
			<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt voluptua.</p>
			<form id="formular" name="formular" method="post" action="">
				<div id="left">
					<h2>test</h2>
					<input name="foo" type="text" size="26" maxlength="10">
					<input name="foo" type="text" size="26" maxlength="10">
					<input name="foo" type="text" size="26" maxlength="10">
					<input name="foo" type="text" size="26" maxlength="10">
					<input name="foo" type="text" size="26" maxlength="10">
					<input name="foo" type="text" size="26" maxlength="10">
				</div>
				<div id="right">
					<h2>blub</h2>
					<input name="foo" type="text" size="26" maxlength="10">
					<input name="foo" type="text" size="26" maxlength="10">
					<input name="foo" type="text" size="26" maxlength="10">
					<input name="foo" type="text" size="26" maxlength="10">
					<input name="foo" type="text" size="26" maxlength="10">
					<input name="foo" type="text" size="26" maxlength="10">
					<input name="foo" type="text" size="26" maxlength="10">
					<input name="foo" type="text" size="26" maxlength="10">
					<input name="foo" type="text" size="26" maxlength="10">
					<input name="foo" type="text" size="26" maxlength="10">
					<input name="foo" type="text" size="26" maxlength="10">
					<input name="foo" type="text" size="26" maxlength="10">
				</div>
			</form>
		</div>
	</body>

CSS:

#left {
				float:left;
				width:300px;
			}
			#right {
				float:right;
				width:300px;
			}

SpiceLab · 24. August 2011

anve hat gesagt.:
Auch wenn ich die Höhe wegtue bleibt dasselbe Ergebnis. Ich bin immer noch der Meinung, dass an dem Code liegt, sprich es nicht bei jeder Art von Inhalt funktioniert!

Es funktioniert (ohne deine hinzugefügte Höhenregelung!) gleichermaßen mit dieser Art von Inhalt, wenn der Umfluß der beiden DIV-Blöcke #left u. #right wieder ordnungsgemäß beendet wird.

Hierzu findet sich in den Webmaster FAQ ein hilfreicher Beitrag, dessen Lösungscode du auf #inhalt anzuwenden hast.

-> CSS Warum passt sich die Boxenhöhe nicht dem Inhalt an?

anve · 24. August 2011

Aaaah, danke das wars!

anve · 24. August 2011

Ich bins nochmal. Jetzt habe ich ein Formular eingebunden, welches ein "GET" durchführt:

HTML:

<form id="calcroute" onsubmit="calcRoute(); return false;" action="" method="get">

Der Inhalt des iFrames verändert sich und der iFrame wird neugeladen, aber die alte Höhe bleibt. Was kann man dabei tun? Gibt es eine einfache Lösung?

HTML:

<form id="calcroute" onsubmit="calcRoute(); return false; parent.resize_me('iFrameContent');" action="" method="get">

Das hat auch nicht geholfen ...

Quaese · 30. August 2011

Hi,

ruf doch im onload-Event des Dokuments, das im iFrame neu geladen wird, ebenfalls die Funktion parent.resize_me auf.

Ciao
Quaese

✔ iFrame Höhe dynamisch anpassen

anve

Mitglied

SpiceLab

ZENmechanic

Quaese

Moderator

anve

Mitglied

Anhänge

SpiceLab

ZENmechanic

anve

Mitglied

SpiceLab

ZENmechanic

anve

Mitglied

anve

Mitglied

Quaese

Moderator

Neue Beiträge