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

Question

我在做什么:

我正在我的网站和主页上开发一个 pdf 阅读器，我有许多电子书封面照片呈现，当用户单击特定电子书时，会出现一个 jquery ui 对话框，我呈现 pdf使用 pdfobject library .

我取得了什么:

在点击电子书图标时，我能够在对话框中呈现 pdf 对象。

问题:

显示看起来很糟糕。pdf 嵌入对象中有滚动条，jquery 对话框也有滚动条(垂直和水平)。

我想要什么:

我的 jquery 对话框有 width = 600 和 height = 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
});