Resize IFRAME Based on Content – Cross Domain

Posted on : 30-04-2009 | By : Michael Fitchett | In : HTML, JavaScript

3

You will find a lot on this topic but no real solid answers. I looked around and ended up piecing this solution together. Yes that’s right it CAN be done! Well sorta…

Put this in between your <HEAD> tags or in your scripts include file

^?View Code JAVASCRIPT

<script type="text/javascript">
//Lookup Cookie by Name and Return Value
function readCookie(name) {
	var nameEQ = name + &quot;=&quot;;
	var ca = document.cookie.split(';');
	for(var i=0;i &lt; ca.length;i++) {
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
}
 
//Set iFrame Height based on &quot;kofax-iframe-height&quot; value
function setIFrameHeightToCookie(cookieValue)
{
	var formHeight = readCookie(cookieValue);
	var iFrame = document.getElementById('iFrame');
 
	//
	if (formHeight != null)
	{
		iFrame.height = parseInt(formHeight) + 30;
	} 
	else
	{
		iFrame.height = '600px';
	}
}
</script>

Add the following to the source page inside of the IFRAME

^?View Code JAVASCRIPT

<script type="text/javascript">
if (window.innerHeight &amp;&amp; window.scrollMaxY) {// Firefox
	yWithScroll = window.innerHeight + window.scrollMaxY;
	xWithScroll = window.innerWidth + window.scrollMaxX;
} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
	yWithScroll = document.body.scrollHeight;
	xWithScroll = document.body.scrollWidth;
} else { // works in Explorer 6 Strict, Mozilla (not FF) and Safari
	yWithScroll = document.body.offsetHeight;
	xWithScroll = document.body.offsetWidth;
}
document.cookie = "page-height=" + yWithScroll  + "; expires=01/01/2999 10:00:00; path=/;domain=.yourdomain.com";
</script>

Create the IFRAME

^?View Code HTML

1	<iframe id="iFrame" src="http://www.yourdomain.com" width="100%" frameborder="0" scrolling="no" allowtransparency="true" onload="setIFrameHeightToCookie('page-height');"></iframe>

I searched all over and as a last resort I decided to use a cookie to pass the height over. Since we are working across domains trying to use JavaScript to access another frame is out of the question. You will get a security error that there seems to be no way around.

If you have a better solution please post it in the comments section below and I will update the post.

Hope this helps! It did for me.

http://www.fitchett.me/wp-content/plugins/sociofluid/images/digg_32.png

http://www.fitchett.me/wp-content/plugins/sociofluid/images/delicious_32.png

http://www.fitchett.me/wp-content/plugins/sociofluid/images/technorati_32.png

http://www.fitchett.me/wp-content/plugins/sociofluid/images/google_32.png

http://www.fitchett.me/wp-content/plugins/sociofluid/images/myspace_32.png

http://www.fitchett.me/wp-content/plugins/sociofluid/images/facebook_32.png

http://www.fitchett.me/wp-content/plugins/sociofluid/images/twitter_32.png

Comments (3)

lorenzo said on 15-07-2009
	this line is throwing a syntax error and I tried it anyway to no avail. readCookie(name) { var nameEQ = name + "=";

Durai said on 05-11-2009
	I am getting empty value from cookie. alert (ca) => Doesn’t give height and all.. Please share your thought on this

Ken said on 17-12-2009

Doesn’t seem like this will work on anything except cross sub-domains. You could accomplish the same thing by just setting document.domain of the iframes on subdomains to be the main domain, then browsers will let you communicate between.

You only have access to the cookies on your domain. And the inner iframe is setting a cookie for “yourdomain” while the outer page is trying to access the cookie by the same name for its domain and not finding anything, which is why its coming back as empty for anyone that tries it on 2 different actual domains.

Featured Posts