具有固定宽度和动态高度的iframe

Question

是否可以使用固定宽度（.ex。75％）和动态高度的iframe？我希望实现的是当加载到iframe的页面时，它不会比我指定的更宽，但是长度需要根据页面的内容。它是一个包含5行文本的页面，框架将足够大以显示这5行。我们是否加载了1000行的大型文档，Iframe高度将自动调整。

先决条件：

• 框架中的网址与父网站位于不同的域中。
• 代码也适用于手机浏览器。
• 如果可能的话，让我们尽量避免使用jQuery。 （使上述更快）

Answer 1

我知道你想避免它，但它真的不应该让你失望太多，以至于它会对你的网站造成负担。我用jquery完成了更疯狂的事情，它像一个冠军一样处理它。在谈论“动态”时，通常可以肯定的是，您需要在某些时候触摸某些JavaScript：P

$(selector)[0].scrollHeight

至于让它变得动态吗？您可以设置间隔来调整高度。

这样的事情：

function setHeight(selector){ 
    var contentHeight = $(selector)[0].scrollHeight;
    $('#iframe-id').attr('height', contentHeight);
}

然后，您可以在页面加载时加载它，也可以将其包装在setInterval中。

如果它只是jquery的东西，你不介意javascript，那么这个网站可以帮助你 http://www.mattcutts.com/blog/iframe-height-scrollbar-example/

Answer 2

可以使用页面呈现代码或JavaScript来操纵IFrame高度...但iframe无法根据内容动态调整大小。

mplungjan评论中的链接带你到关于这个主题的非常好的帖子。