iFrame dynamic resize

Question

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>

Try deleting this: `width="960" height="100%"` – Santiago Baigorria Apr 09 '13 at 12:45 — Santiago Baigorria, Apr 09 '13 at 12:45
ok.. i'm using javascript.. but not work... – Preston Apr 09 '13 at 13:10 — Preston, Apr 09 '13 at 13:10

score 1 · Accepted Answer · answered Apr 09 '13 at 13:18

1

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>

answered Apr 09 '13 at 13:18

Max

145
8

Same problem as James suggestion... the scrollbar don't update if i open another page with less(low) content... – Preston Apr 09 '13 at 13:38
Hey max, take a look here: http://luilui.com.br/inverno2013/, i need to click twice on menu to show the entire page with your code... how about that?? – Preston Apr 10 '13 at 01:52
i have a solution.. i used a `window.setTimeout()` to execute that function.. and works pretty well – Preston Apr 10 '13 at 23:45

fmodos · Answer 2 · 2013-04-09T13:16:46.747

0

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()">

edited Apr 09 '13 at 13:16

answered Apr 09 '13 at 13:01

fmodos

4,472
1
16
17

i edited my post, the javascript wasn't been invoked... please check it – fmodos Apr 09 '13 at 13:17
look the answer of James, this works, but the scrollbar dont update their size, if i open another page with less content... – Preston Apr 09 '13 at 13:32
in his case the size of the iframe is controlled by the parent page, it only resize when the page is loaded, it is not notified when the size of the iframe change... you would need to call this function again when the iframe size change. – fmodos Apr 09 '13 at 13:37
i'm trying to put this on the page: `` but not work... – Preston Apr 09 '13 at 13:46
This is the solution, I dont know why but the browser is blocking the access from your iframe to the parent page. It should work because both are in the same domain. This is why that my code didn't work too. – fmodos Apr 09 '13 at 13:48
what? blocking page at same domain?.. on chrome under console panel (CTRL+SHIFT+J) is not showing any erros.. – Preston Apr 09 '13 at 13:55

score 0 · Answer 3 · edited May 23 '17 at 10:32

0

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

edited May 23 '17 at 10:32

Community

1
1

answered Apr 09 '13 at 13:10

James Gaunt

14,631
2
39
57

James this.. works in parts, if you open a page that has a long scrollbar, and then another page with small scrollbar, that scrollbar does not fit the new size, the size remaining of the previous page... can you look here: http://d-3.me/pagina2.html - click on first link – Preston Apr 09 '13 at 13:31

iFrame dynamic resize

3 Answers3

Linked