1

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

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

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

4

3 回答 3

2

如果要显示不带滚动条的 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 中的外观：

在此处输入图像描述

这正如预期的那样。

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

于 2012-11-05T07:58:45.210 回答
0

您可以使用我在我的 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 的大小:)

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

于 2012-12-30T19:46:27.807 回答
0

我的解决方案

$(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>
于 2018-05-31T16:45:56.077 回答