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

【问题标题】：iframe with fixed width and DYNAMIC height具有固定宽度和动态高度的 iframe
【发布时间】：2012-05-21 01:26:35
【问题描述】：

是否可以使用具有固定宽度（例如 75%）和动态高度的 iframe？我想要实现的是，当页面加载到 iframe 中时，它不会比我指定的更宽，但长度需要根据页面的内容而定。它是一个有 5 行文本的页面，框架将足够大以显示这 5 行。如果我们加载一个 1000 行的大文档，会自动调整 iframe 的高度。

先决条件：

框架中的 url 与父级位于不同的域中。
代码应该也可以在手机浏览器上运行。
如果可能，让我们尽量避免使用 jQuery。（使上述速度更快）

【问题讨论】：

重复Resizing an iframe based on content

标签： javascript html css iframe

【解决方案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/

【讨论】：

【解决方案2】：

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

mplungjan 评论中的链接将您带到有关此主题的非常好的帖子。

【讨论】：