Question

有没有办法让iframe的高度适合它的内容？你能告诉我怎么做吗？我尝试在网上搜索并尝试代码，但没有运气

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta NAME="Description" content="Communigate Technologies" />
<meta HTTP-EQUIV="Cache-Control" content="no-cache" />
<meta HTTP-EQUIV="pragma" content="no-cache" />

<title></title>

</head>

<body>
    <div align="center" style="z-index:1;">
    <?php include 'header.html' ?>

        <iframe align=top width=800px src="aboutus1.php" frameborder=1 border=0 framespacing=0 SCROLLING=no id="bodyframeid" name="bodyframename"></iframe>

    </div>

</body>

</html>

Answer 1

由于我们处于CSS3时代，您可以使用视口单元来完成此操作。这些单位允许您根据视口宽度和视口高度的百分比指定大小。这是用户的视口，也称为屏幕。但是，在我尝试过的所有主流浏览器中，如果你把一个iframe放在一个div里面，这个div位于另一个div内并且相对定位，则视口单元相对于这个div。由于100个视口高度单位意味着100％的高度，你可以这样做：

<div id="parent">
    <div id="wrapper" style="position:relative">
        <iframe style="position:absolute;top:0px;width:100%;height:100vh;" src="http://anydomain.com"></iframe>
    </div>
</div>

我觉得这是最好的解决方案，因为它是跨域，并且显示的内容与您想要的完全没有任何javascript或其他复杂内容。

最重要的是，它适用于所有浏览器，甚至是移动浏览器（在Android和iPhone上测试过）！

Answer 2

我是这样做的：

  document.getElementById("iframename").height = (document.getElementById("iframename").contentWindow.document.body.scrollHeight) + "px";

有时这没有用，但我注意到这是因为iframe的页面没有完整呈现。在这种情况下，我从未注意到任何进一步的问题，把指令放在里面：

 setTimeout(function (){ - here - }, 100)

希望我帮助过。

Answer 3

如果您的文档和iframe内容具有相同的来源（在您的示例中，您有），您可以从主文档运行：

var iframe = document.getElementById('my-iframe')
var content = iframe.contentWindow.document.getElementById('content')
var height = content.offsetHeight + 15 //add something to support paddings etc.
iframe.style.height = height + 'px'
var width = content.offsetWidth + 15
iframe.style.width = width + 'px'

但要检查您适应的'content'元素的大小，因为元素通常比可见内容大得多。

适合其内容的Iframe高度

3 个答案: