5

有没有办法让 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>
4

3 回答 3

7

由于我们处于 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 上测试）！

于 2014-03-13T18:33:16.540 回答
1

我这样做：

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

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

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

希望我有所帮助。

于 2013-08-02T18:38:53.657 回答
0

如果您的文档和 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'

但是请检查您适应的“内容”元素的大小，因为该元素通常比可见内容大得多。

于 2013-07-31T07:31:03.040 回答