iFrame动态调整大小

我有这段代码，但不工作... iFrame不根据其内容调整大小...iFrame动态调整大小

我在做什么错？我试了很多代码，任何人都在为我工作...

有什么建议吗？

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>

来源

2013-04-09 Preston

尝试删除这样的：'WIDTH = “960” HEIGHT = “100％”' – 2013-04-09 12:45:35

没有动静 – Preston 2013-04-09 13:06:40

确定..我使用的JavaScript ..但没有工作... – Preston 2013-04-09 13:10:18

我认为这会帮助你，把这个块在Iframe.html的页面的结束和删除块。

<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>

来源

2013-04-09 13:18:32 Max

与詹姆斯的建议相同的问题...滚动条不更新，如果我打开更少（低）内容的另一页... – Preston 2013-04-09 13:38:18

哇...这个作品！我链接到了错误的页面 – Preston 2013-04-09 13:59:29

Hey max，看看这里：http：//luilui.com.br/inverno2013/，我需要点击菜单上的两次以显示整个页面与您的代码...那该怎么样?? – Preston 2013-04-10 01:52:41

你设置错了height属性。它缺少风格之前的高度。此外，该JavaScript代码没有被调用，我将它添加到在页面的onload调用的函数。检查代码：

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

来源

2013-04-09 13:01:57 fmodos

什么都没有发生...... – Preston 2013-04-09 13:07:22

我编辑我的帖子，JavaScript没有被调用...请检查它 – fmodos 2013-04-09 13:17:45

相同..你可以看看这里：http://d-3.me/pagina.html – Preston 2013-04-09 13:23:08

I帧从未调整图的基础上的内容。你需要使用JavaScript来实现这一点。您的百分比样式值始终会引用最接近的iframe内定位父项，就像大多数其他元素一样。

这个问题说明了如何使用脚本这样的：

Adjust width height of iframe to fit with content in it

来源

2013-04-09 13:10:08

詹姆斯这个..分段工作，如果你打开一个长滚动条的页面，然后是另一个带小滚动条的页面，那个滚动条不适合新的尺寸，前一页剩余的尺寸......你能看看在这里：http://d-3.me/pagina2.html - 点击第一个链接 – Preston 2013-04-09 13:31:01

iFrame动态调整大小

回答

相关问题