Javascript 固定宽度和动态高度的iframe

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

先决条件：

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

---

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

---

mplungjan评论中的链接将带您进入一篇关于这个主题的非常好的帖子。

我知道您希望避免它，但它确实不应该让您的速度慢到对您的网站造成负担。我用jquery做过更疯狂的事情，它的处理方式就像冠军一样。当谈到“动态”时，通常可以肯定的是，您需要在某个时候接触一些javascript:P

$(selector)[0].scrollHeight

至于让它充满活力？您可以设置一个间隔来调整高度

大概是这样的：

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

然后，要么在页面加载中加载它，要么在setInterval中包装它

如果这只是jquery的事情，而你不介意javascript，那么这个网站可以帮助你

副本