Script: iframe hoogte aanpassen

[Bolies]

Ik heb een script in mijn website zitten die er voor zorgt dat mijn iframe veld zich vanzelf aanpast aan de grootte van de pagina die in het iframe veld getoond wordt(, hierdoor komt er geen overbodige scrollbar in de pagina).
Als ik een pagina op mijn website open d.m.v een button dan verschijnt deze pagina in het iframe-veld. Als de deze pagina klein is (qua hoogte) dan zal het iframe veld ook klein worden, is de pagina die in het iframe veld komt groot (dus erg lang/hoog) dan wordt het iframe veld ook direct zo lang/hoog dat de hele pagina er in zijn geheel er in past zonder dat er een scrollbar zal verschijnen in het iframe veld.
Hier de code van het script:

<script language="javascript" type="text/javascript">	
	function init()
	{
		var iframe = null;
		
		iframe = document.getElementById("home");
		
		iframe.onload = checkLoaded;
		iframe.onreadystatechange = checkLoaded;
		
		resizeFrame(iframe);
	}
	
	function checkLoaded()
	{
		if((document.all && this.readyState == "complete") || !document.all)
			resizeFrame(this);
	}
	
	function resizeFrame(obj)
	{
		var fHeight = 1000; //Fixed if nothing is found
		if(obj.contentDocument && obj.contentDocument.body.offsetHeight)
			fHeight = obj.contentDocument.body.offsetHeight;
		else if(obj.Document.body.scrollHeight)
			fHeight = obj.Document.body.scrollHeight;
		obj.style.height = fHeight + "px";	
	}
	
	if(window.onload)
	{
		windowOnLoad = window.onload;
		window.onload = function(){ windowOnLoad(); init();}
	} else {
		window.onload = init;
	}
</SCRIPT>

Deze code werkt perfect in IE, maar in firefox wordt het iframe veld elke keer net iets te kort gemaakt. Hierdoor heb ik last van de scrollbar die dan in het iframe veld zal komen te staan. Wie weet hoe dit is op te lossen?
Alvast bedankt!

 

[TjallingBC]

Je zou, naast het resizen naar de gegeven grootte, nog een paar pixels bovenop kunnen doen, nog een + dus, en dan kijken of hij in Firefox ook goed weergeven wordt.

 

[Bolies]

Daar dacht ik zelf ook al wel aan, maar waar in de code zal ik dan het één en ander moeten veranderen dan? En hoe?

 

[TjallingBC]

Ik ben geen Javascript expert maar probeer dit eens:

		var fHeight = 1000; //Fixed if nothing is found
		if(obj.contentDocument && obj.contentDocument.body.offsetHeight)
			fHeight = obj.contentDocument.body.offsetHeight+20;
		else if(obj.Document.body.scrollHeight)
			fHeight = obj.Document.body.scrollHeight+20;
		obj.style.height = fHeight + "px";

Puur een gok hoor, op basis van wat ik lees over resizen van iframes in Javascript.

Als dat niet werkt kan je ook in de laatste zin van dat deel dit proberen:

		obj.style.height = fHeight+20 + "px";

Op basis van logisch denken zou ik zeggen dat beide moeten werken, maar nogmaals, ik weet er niet zo veel van.

Die 20 is dus een statisch gegeven, je kan dit misschien ook nog kleiner maken totdat het net kan en Firefox het goed weergeeft. Probeer maar even.

 

[Bolies]

Soms is de oplossing makkelijker dan je denkt.Ik heb de volgende regel (met dank aan TjallingBC) in de code veranderd.

obj.style.height = fHeight [COLOR="Red"]+ 40[/COLOR] + "px";

(+ 20 was niet voldoende)

Dit is dus de uiteindelijke code geworden:

<script language="javascript" type="text/javascript">	
	function init()
	{
		var iframe = null;
		
		iframe = document.getElementById("home");
		
		iframe.onload = checkLoaded;
	iframe.onreadystatechange = checkLoaded;
		
		resizeFrame(iframe);
	}
	
	function checkLoaded()
	{
		if((document.all && this.readyState == "complete") || !document.all)
			resizeFrame(this);
	}
	
	function resizeFrame(obj)
	{
		var fHeight = 1000; //Fixed if nothing is found
		if(obj.contentDocument && obj.contentDocument.body.offsetHeight)
			fHeight = obj.contentDocument.body.offsetHeight;
		else if(obj.Document.body.scrollHeight)
			fHeight = obj.Document.body.scrollHeight;
		obj.style.height = fHeight + 40 + "px";	
	}
	
	if(window.onload)
	{
		windowOnLoad = window.onload;
		window.onload = function(){ windowOnLoad(); init();}
	} else {
		window.onload = init;
	}
</SCRIPT>

Nu werkt mijn site weer top! TjallingBC harstikke bedankt voor je hulp, thanx!:thumb:

 

[motower]

waar het script en wat nog meer?

Ik ben ook op zoek naar een dergelijk script, maar niet zo thuis in JS.
Dus .....
moet ik dit script in de head of body plaatsen?
En .....
wat gebruik ik dan voor het iframe, ik heb nu staan:


<body>
<div align="center"><iframe width="100%" height="760" frameborder="0" scrolling="yes" marginheight="0" marginwidth="0" src="http://www.eurorelais.org"></iframe><br />
</div>
</body>