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

Question

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

先决条件:

• 框架中的 url 与父级位于不同的域。
• 代码应该也适用于手机浏览器。
• 如果可能，让我们尽量避免使用 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/