Automatic iframe height

lorre851 · 08-27-2012, 08:27 PM

Hey guys,

I've been messing with iframes all day now, and they're driving me crazy. I'm trying to make the iframe automatically adjust to its content, but it's not working. None of the scripts I found on Google made it work.

I have an iframe on my parent page, that contains dynamic content. When you go to the website, the iframe opens a page with a div tag that's 335px tall. When you click a link on the parent page, the content of the iframe changes and it opens another page, this time containing a div that's only 100px tall.

So what I want is that the iframe automatically shrinks/grows with the content of the page it displays. Question is: how? I have very little experience with javascript. So far I've been literally copying code from various sites, not knowing what they're saying or doing. I'm making my website this way, because I don't want to make two seperate websites for desktop and mobile. Now I only have to make the 'shell' around the content of my site.

If anybody could tell me how to make the iframe adjust autmatically, I'd be very thankful

Here it is (you'll immediately see the problem):
http://www.kljhamme.be/redalert/LEVLS/

AndrewGSW · 08-28-2012, 04:38 AM

As you already have onload="resizeIframe()" try copying the following in the <head> area of your page:

Code:

<script type="text/javascript">
function resizeIframe(iframe) {
    if (iframe) {
        var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
        if (iframeWin.document.body) {
            iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
        }
    }
}
</script>

BTW "javascript:" has not been necessary for a long time.

lorre851 · 08-28-2012, 11:28 AM

I added the script, but it didn't do anything. Chrome and IE keep rendering the page wrong.

The weird thing is that Safari (both desktop and mobile) handle the iframe correctly. It resizes the iframe automatically, even without script :s
Even when I put the script and iframe on another page, it still doesn't render correctly

http://www.kljhamme.be/redalert/LEVLS/testpage.html

This is what the entire code looks like now (also updated it on the server):

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>LEVLs - design</title>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<script src="scripts/jquery.js" type="text/javascript"></script>
<style type="text/css">
body {
	background-image: url(images/Wave-Of-Light.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-attachment: fixed;
	background-color: #000;
}
body,td,th {
	font-family: Arial, Helvetica, sans-serif;
	color: #FFF;
}
a:link {
	color: #FFF;
}
a:visited {
	color: #999;
}
a:hover {
	color: #FF0;
}
a:active {
	color: #FFF;
}
</style>

<script type="text/javascript">
function resizeIframe(bodyframe) {
    if (bodyframe) {
        var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
        if (iframeWin.document.body) {
            iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
        }
    }
}
</script>

</head>

<body>

<script src="scripts/center.js" type="text/javascript"></script>

<div id="content">

  <div id="logo"><img src="images/shadlogo.png" width="300" height="226" /></div>
  <div id="menu"><iframe name="menu" src="menu.html" scrolling="no" style="border:none; overflow:hidden; width:800px; height:35px;" allowTransparency="true" frameborder="0"></iframe></div>

<iframe id="bodyframe" name="bodyframe" src="pages/home.html" scrolling="no" style="border:none; overflow:hidden; width:800px" allowTransparency="true" frameborder="0" onload="resizeIframe()"></iframe>



  <div id="about">
    <iframe src="footer.html" scrolling="auto" style="border:none; overflow:hidden; width:800px; height:23px;" allowTransparency="true" frameborder="0"></iframe>
  </div>
</div>
</body>
</html>

AndrewGSW · 08-28-2012, 11:53 AM

You renamed iframe to bodyframe - which is a good idea - but not on this line:

Code:

var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;

lorre851 · 08-28-2012, 12:15 PM

Thanks for the tip, but unfortunately that didn't do anything.
I stopped working on the main page (to prevent any damage) and put the code on the testpage.

Rather than changing everything in the script to "bodyframe", I changed the iframe id to "iframe". Still nothing

This is what it looks like now:

Code:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function resizeIframe(iframe) {
    if (iframe) {
        var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
        if (iframeWin.document.body) {
            iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
        }
    }
}
</script>
</head>

<body>
<iframe id="iframe" name="iframe" src="pages/home.html" scrolling="no" style="border:none; overflow:hidden; width:800px" allowTransparency="true" frameborder="0" onload="resizeIframe()"></iframe>
</body>
</html>

http://www.kljhamme.be/redalert/LEVLS/testpage.html

AndrewGSW · 08-28-2012, 12:32 PM

Seems there's a bit more to this than I found at this page.

I suspect that the onload attribute only fires once, and you may need to dynamically addEventListener. But perhaps someone else has experience of this.

lorre851 · 08-28-2012, 12:46 PM

I lost you at "addEventListener".. Guess I better pick up some javascript course today, trying scripts without knowing anything about them is driving me crazy.

EDIT: I now /literaly/ copied the code on the demo page, and AGAIN it doesn't work >.<

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
		function setIframeHeight(iframe) {
			if (iframe) {
				var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
				if (iframeWin.document.body) {
					iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
				}
			}
		};

		window.onload = function () {
			setIframeHeight(document.getElementById('external-frame'));
		};
	
</script>
<script async="" type="text/javascript" src="http://d.textsrv.com/?c=QkU6OjoxMTQ3OjUzNDYzOjEzODYxZGE5ZmJiYWViZjlhMWQzZjkwM2EwMjU0NzU4OmE2NTJj&amp;cachebreak=1346155493006&amp;cb=_GPL.dc" id="_GPL_fb7b3"></script>
</head>

<body>
<iframe src="pages/home.html" frameborder="0" id="external-frame" width="800" height="200" scrolling="no"></iframe>
</body>
</html>

AndrewGSW · 08-28-2012, 02:07 PM

I got the following version to work with two test pages and a button to click on. I have to set an initial (minimum) height of 200px each time as otherwise the iframe remains at the tallest height.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
		function setIframeHeight(iframe) {
			if (iframe) {
				var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
				if (iframeWin.document.body) {
					iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
				}
			}
		};
        
        function updateIt() {
            var iframe = document.getElementById('external-frame');
            iframe.height = 200;        // a minimum setting
            iframe.onload = function () {
                setIframeHeight(this);
            }
            iframe.src = ((iframe.src).indexOf("colourscheme.html") + 1) ? "lorem.html" : "colourscheme.html";
        }

		window.onload = function () {
			setIframeHeight(document.getElementById('external-frame'));
		};
	
</script>
<!--<script async="" type="text/javascript" src="http://d.textsrv.com/?c=QkU6OjoxMTQ3OjUzNDYzOjEzODYxZGE5ZmJiYWViZjlhMWQzZjkwM2EwMjU0NzU4OmE2NTJj&amp;cachebreak=1346155493006&amp;cb=_GPL.dc" id="_GPL_fb7b3"></script>-->
</head>

<body>
    <button onclick="updateIt()">Update it</button>
<iframe src="lorem.html" frameborder="1" id="external-frame" width="800" height="200" scrolling="no"></iframe>
</body>
</html>

I think the secret is to dynamically attach the load() event on each occasion, before changing the iframe's source.

Richter · 08-28-2012, 02:30 PM

Hi lorre851,
It's seem you haven't problem about call event so I will focus about resize code.

Place this code into you function that you call it on frame loaded.

Code:

var Tmp = document.getElementById("bodyframe");
Tmp.style.height = Tmp.contentDocument.body.clientHeight + "px";
//check function has been call.
alert(Tmp.style.height);