为 iframe 设置自动高度答案

【问题标题】：Set auto height for iframe为 iframe 设置自动高度
【发布时间】：2012-10-24 11:55:12
【问题描述】：

我有一个带有 pdf 文件的 iframe：

<iframe src="pdf/sample.pdf"></iframe>

如何设置iframe和pdf文件高度一样，不带滚动条？

【问题讨论】：

stackoverflow.com/questions/247128/how-to-auto-size-an-iframe, stackoverflow.com/questions/153152/…

标签： pdf iframe height

【解决方案1】：

如果您想显示不带滚动条的 PDF，您可以通过在 URL 中传递参数来实现。 Adobe 在此处记录了这一点： http://www.adobe.com/content/dam/Adobe/en/devnet/acrobat/pdfs/pdf_open_parameters.pdf

试试这个：

<iframe src="pdf/sample.pdf#view=fit"></iframe>

您没有完全设置 iframe 的高度以适合 PDF，但它可能是最强大的解决方案，因为它独立于浏览器并且不需要 JavaScript。

这是丹尼尔发表评论后的更新。

我创建了一个测试 HTML 如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>Untitled Page</title>
</head>
<body>
   <iframe src="http://partners.adobe.com/public/developer/en/pdf/PDFReference.pdf#view=fit&toolbar=0&navpanes=0"
      width="300px" height="400px"></iframe>
</body>
</html>

这是它在 Chrome 中的外观：

这符合预期。

请注意，我还关闭了工具栏和导航窗格，以便为页面留出空间。

【讨论】：

是的，但是您已将高度设置为 400，并且我希望 pdf 显示在 iframe 中而没有滚动条。因此，当我要查看 pdf 时，我必须使用浏览器滚动条向下滚动。现在你明白我的意思了吗？
@Daniel 您看到的滚动条不是 iFrame 的滚动条，而是 PDF 查看器的滚动条。它允许您滚动到下一页。我很确定即使使用 URL 参数将页面布局设置为单页左右也可以解决这个问题。我提供了一个参考链接。
@FrankRem 但我认为这就是重点。我们想要以某种方式让 PDF 视图在 DOM 中达到这样的高度，以便 PDF 视图本身没有滚动条。然后，您将滚动 HTML 页面本身以查看其他页面，这些页面已经显示在屏幕外（而不是隐藏在 PDF 视图中）。这个问题与 iframe 中的 PDF 更相关，而不是一般的 iframe
这将要求您计算所有页面高度的总和（加上页面间距）。我不知道实现这一点的方法。

【解决方案2】：

您可以使用我在我的 Facebook 帖子 https://www.facebook.com/antimatterstudios/posts/10151007211674364 中解释的方法简单地做到这一点

您是否有一个 IFrame，您想自动设置它的高度，因为您正在托管另一个网站的页面。

不幸的是，IFrame 无法获取您正在加载的内容的高度，除非您设置高度，否则它将显示默认高度或根本不显示高度。这很烦人。

我有适合您的解决方案，它只适用于最新的标准支持浏览器，但也适用于 IE8，因此对于大约 99% 的人来说，它是完美的。

唯一的问题是你需要在 iframe 中插入一个 javascript，如果你正在加载的内容属于你，这很容易，你可以打开你正在加载的内容并将 javascript 放入内容中。

在您的网站中，您需要一段可以“从 IFrame 接收消息”的 javascript，如下所示

jQuery(document).ready(function(){
    jQuery(window).bind("message",function(e){
        data = e.data || e.originalEvent.data;
        jQuery("iframe.newsletter_view").height(data.height);
    });
});

在您的 IFrame 内容中，将其添加到最底部，即使 javascript 不在标签内，也可以使用 PHP 或其他方式执行“$template.$javascript”之类的操作

<script type="text/javascript" src="jquery-1.7.1-min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    parent.postMessage({
        height:$(document.body).height()+50+"px"
    },"*");
});
</script>

显然我使用的是 jquery，你不必这样做，它更容易而且可能你正在使用它，所以省去你自己的麻烦。

如果你这样做，当 iframe 加载时，它会向父窗口发送一个信号，它会根据内容的长度调整 iframe 的大小:)

我相信你可以弄清楚如何改变这些小东西，但这就是我正在使用的方法

【讨论】：

或者，您可以打开内容，然后将 javascript 粘贴到要在 iframe 中显示的内容的底部，我应该说清楚，但是在读回我的答案后，我意识到我没说清楚。

【解决方案3】：

我的解决方案

$(document).ready(function(){
  var width = $(window).width();
  var height = $(window).height();

  $('#objFile').attr('style', 'width: ' + width + 'px; height: ' + height + 'px;');
});

<object data="myFile.pdf" type="application/pdf" id="objFile"></object>

【讨论】：