CODEWITHSUNDEEP
javascripthtml
Preston
Preston

Reputation: 2185

iFrame dynamic resize

I have this code but is not working... the iFrame doesn't resize based on their content...

What i'm doing wrong? I have tried a lot of codes and anyone is working for me...

any suggestions?

page.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TEST</title>
</head>
<body>
    <iframe id="klaus" src="iframe.html" width="960" height="100%"></iframe>
</body>
</html>

iframe.html

<!DOCTYPE html>
<html>
<head>
<title>pagina</title>
<script language="Javascript" type="text/javascript">
  parent.document.getElementById("klaus").height = document.getElementById("size").scrollHeight + 40;
</script>
</head>
<body>
<div id="size">
<p>Conteudo</p> <p>Conteudo</p> <p>Conteudo</p> <p>Conteudo</p> <p>Conteudo</p>
<p>Conteudo</p> <p>Conteudo</p> <p>Conteudo</p> <p>Conteudo</p> <p>Conteudo</p>
<p>Conteudo</p> <p>Conteudo</p> <p>Conteudo</p> <p>Conteudo</p> <p>Conteudo</p>
<p>Conteudo</p> <p>Conteudo</p> <p>Conteudo</p> <p>Conteudo</p> <p>Conteudo</p>
<p>Conteudo</p> <p>Conteudo</p> <p>Conteudo</p> <p>Conteudo</p> <p>Conteudo</p>
<p>Conteudo</p> <p>Conteudo</p> <p>Conteudo</p> <p>Conteudo</p> <p>Conteudo</p>
<p>Conteudo</p> <p>Conteudo</p> <p>Conteudo</p> <p>Conteudo</p> <p>Conteudo</p>
<p>Conteudo</p> <p>Conteudo</p> <p>Conteudo</p> <p>Conteudo</p> <p>Conteudo</p>
<p>Conteudo</p> <p>Conteudo</p> <p>Conteudo</p> <p>Conteudo</p> <p>Conteudo</p>
<p>Conteudo</p> <p>Conteudo</p> <p>Conteudo</p> <p>Conteudo</p> <p>Conteudo</p>
</div>
</body>

</html>

Upvotes: 0

Views: 3479

Answers (3)

Max
Max

Reputation: 145

I think this will help you, put this block at the end of the iframe.html page and delete your block.

<script language="Javascript" type="text/javascript">

  var _iframe = parent.document.getElementById("klaus"),
      _height = _iframe.contentDocument.getElementById("size").scrollHeight || _iframe.contentWindow.document.getElementById("size").scrollHeight;
      _iframe.height = _height + 40;
</script>

Upvotes: 1

fmodos
fmodos

Reputation: 4568

You are setting wrong the height property. It is missing the style before the height. Also that javascript code wasn't been invoked, I added it to a function which is invoked in the onload of the page. Check the code:

<title>pagina</title>
<script language="Javascript" type="text/javascript">
function resizeIframe(){  
parent.document.getElementById("klaus").style.height = document.getElementById("size").scrollHeight + 40;
}
</script>
</head>
<body onload="resizeIframe()">

Upvotes: 0

James Gaunt
James Gaunt

Reputation: 14783

iframes never resize based on their content. You'll need to use javascript to achieve this. Your percentage style value will always refer the closest positioned parent of the iframe, like it would for most other elements.

This question shows how to use script for this:

Adjust width height of iframe to fit with content in it

Upvotes: 0

Related Questions