Pdf 为iframe设置自动高度

Pdf 为iframe设置自动高度,pdf,iframe,height,Pdf,Iframe,Height,我有一个带pdf文件的iframe: <iframe src="pdf/sample.pdf"></iframe> 如何设置iframe的高度与pdf文件的高度相同,不带滚动条?如果要显示不带滚动条的pdf,可以通过在URL中传递参数来实现。Adobe在此处记录了这一点: 试试这个: <iframe src="pdf/sample.pdf#view=fit"></iframe> 您并没有精确地设置iframe的高度以适应PDF,但它可

我有一个带pdf文件的iframe:

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


如何设置iframe的高度与pdf文件的高度相同,不带滚动条?

如果要显示不带滚动条的pdf,可以通过在URL中传递参数来实现。Adobe在此处记录了这一点:

试试这个:

<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中的外观:

这是意料之中的


请注意,我还关闭了工具栏和导航窗格,这样页面就有了空间。

您只需使用我在facebook帖子中解释的方法即可完成

您是否有IFrame,您希望自动设置其高度,因为您正在托管来自您网站中其他网站的页面

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

我为您提供了解决方案,它只适用于最新的标准支持浏览器,也适用于IE8,所以对于99%的用户来说,它是完美的

唯一的问题是您需要在iframe中插入一个javascript,如果您正在加载的内容属于您,那么这很容易,您只需打开正在加载的内容并将javascript放入内容中即可

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

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>

$(文档).ready(函数(){
parent.postMessage({
高度:$(document.body).height()+50+“px”
},"*");
});
显然,我正在使用jquery,您不必这样做,它只是更简单,而且您可能正在使用它,所以省去了麻烦

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

我相信你能想出如何改变这些小东西,但这就是我正在使用的方法

$(文档).ready(函数(){
变量宽度=$(窗口).width();
var height=$(window.height();
$('#objFile').attr('style','width:'+width+'px;height:'+height+'px;');
});


,是的,但您已将高度设置为400,我希望pdf显示在iframe中,而不显示滚动条。因此,当我想要查看pdf时,我必须使用浏览器滚动条向下滚动。现在你明白我的意思了吗?@Daniel你看到的滚动条不是iFrame的滚动条,而是PDF查看器的滚动条。它允许您滚动到下一页。我非常确信,通过使用URL参数将页面布局设置为单页左右,甚至可以解决这个问题。我提供了参考资料的链接。@FrankRem,但我认为这就是重点。我们需要一种方法,以某种方式使PDF视图在DOM中达到这样的高度,以便PDF视图本身没有滚动条。然后在HTML页面上滚动查看其他页面,这些页面已经在屏幕外显示(而不是隐藏在PDF视图中)。这个问题与iFrame中的PDF更为相关,而不是通常的iFrame。这将要求您计算所有页面高度(加上页面间距)的总和。我不知道有什么方法可以做到这一点。或者,你可以打开内容,然后通过javascript进入你想在iframe中显示的内容的底部,我本应该说清楚的,但在阅读了我的答案后,我意识到我并没有这么说。