iFrame动态调整大小

Question

我有此代码，但无法正常工作... 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>

Answer 1

我认为这对您有帮助，请将此代码块放在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>

Answer 2

您设置的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()">

Answer 3

iframe永远不会根据其内容调整大小。 您需要使用javascript来实现。 百分比样式值将始终引用iframe的最接近父级，就像其他大多数元素一样。

此问题说明如何为此使用脚本：

调整iframe的宽度高度以适合其中的内容

iFrame动态调整大小

问题描述

3 个解决方案

解决方案1
1 已采纳 2013-04-09 13:18:32

解决方案2
0 2013-04-09 13:01:57

解决方案3
0 2013-04-09 13:10:08

iFrame动态调整大小

问题描述

3 个解决方案

解决方案1 1 已采纳 2013-04-09 13:18:32

解决方案2 0 2013-04-09 13:01:57

解决方案3 0 2013-04-09 13:10:08

解决方案1
1 已采纳 2013-04-09 13:18:32

解决方案2
0 2013-04-09 13:01:57

解决方案3
0 2013-04-09 13:10:08