消除滚动条并将嵌入的pdf放入我的jquery对话框中

Question

我在做什么：

我正在我的网站和我的主页上开发一个pdf阅读器我有许多电子书覆盖了所呈现的照片，当用户点击某个特定的电子书时，会出现一个jquery ui对话框并且我会渲染pdf使用pdfobject library。

我取得的成就：

点击电子书的图标，我可以在对话框中渲染pdf对象。

问题：

显示看起来非常糟糕。在pdf embededd对象中有滚动条，jquery对话框有滚动条（verical和horizo​​ntal）。

我想要的是什么：

我的jquery对话框的宽度= 600，高度= 500，当我第一次打开对话框时，应该只有1个垂直滚动条，pdf的第一页应该适合我的对话框默认尺寸（600 X 500），无论如何它的原始尺寸是多少。 如果pdf只有1页，则不应该有滚动条（除非用户点击放大）

Javascript代码：

$(function() {
    $( "#pdfPrompt" ).dialog({
        autoOpen: false,
        show: "blind",
        hide: "explode",
        width:600,
        height:500,
        resizable : false
    });

    $( "#opener" ).click(function() {
        $( "#pdfPrompt" ).dialog( "open" );
            var myPDF = new PDFObject({ url: "sample.pdf" }).embed('renderer');

        return false;
    });
});

opener只是我给icon的id，而pdfprompt是一个简单的<div>

示例：

在尝试了charlietfl的解决方案（jsFiddle）之后：

你能帮我实现这个目标吗，谢谢你

Answer 1

一个潜在的问题是隐藏的元素没有维度。这会导致问题，例如在隐藏的div中处理谷歌地图。 pdf查看器脚本可能需要获取容器的尺寸。

出于这个原因删除show的动画。

您可能需要等到对话框打开才能将pdf放在对话框中。

$( "#pdfPrompt" ).dialog({
    autoOpen: false,
   open:function(){
        /* code here to render pdf*/
    },
    hide: "explode",     
    width:600,
    height:500,
    resizable : false
});

Answer 2

您可以尝试使用google docs查看器自动调整查看的pdf大小（demo）

<iframe src="http://docs.google.com/gview?url=http://samplepdf.com/sample.pdf&embedded=true" style="width:100%; height:100%;" frameborder="0"></iframe>