Question

我有一个带pdf文件的iframe：

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

如何设置iframe与pdf文件的高度相同，没有滚动条？

Answer 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。

这是Daniel发表评论后的更新。

我创建了一个测试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中的外观：

enter image description here

这是预期的。

请注意，我还关闭了工具栏和navpane，因此页面有空间。

Answer 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内容中，在最底部添加，可能只需使用PHP或其他东西做“$ template。$ javascript”，即使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的大小：）

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

Answer 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>

为iframe设置自动高度

3 个答案: