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

你设置的是高度属性。它在高度之前缺少样式。此外，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中距离最近的父级，就像对大多数其他元素一样。

此问题显示了如何使用脚本：

Adjust width height of iframe to fit with content in it

iFrame动态调整大小

3 个答案: