5

多くの PDF ファイルをホストするサイトで作業しており、それらをプレビュー用に fancybox (2.1) で開きたいと考えています。Chrome と Firefox で問題なく動作します。ただし、IE8 では機能しません。私は PDF ファイルへの直接リンク、iframe へのリンク、および埋め込みタグへのリンクを試みました (とりわけクレイジーなこと)。Google を使用してそれらをラップすることはできません。これは、問題を示すページです。 

<!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" xml:lang="en">
<head>
    <title>My Page</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.fancybox.js?v=2.1.0"></script>
    <link type="text/css" rel="stylesheet" media="screen" href="jquery.fancybox.css" />
</head>
<body style="background-color:grey">    
    <p><a href="mypdffile.pdf" class="fancypdf">a link</a> to a PDF file.</p>

    <p><a href="#Frame1" class="fancy">a link</a> to an iframe with the pdf in it.</p>
    <div style="display:none">
    <iframe id="Frame1" src="mypdffile.pdf" style='width:100%;' height="600" frameborder="0" allowTransparency="true"></iframe>
    </div>

    <p><a class="fancy" href="#mypdf" >a link</a> to a pdf in an embed tab</p>
    <div style="display:none"><div id="mypdf"> 
    <embed src="mypdffile.pdf" type="application/pdf" width="640" height="480" /> 
    </div></div>  

    <script type='text/javascript'>
    $(function(){
        $("a.fancypdf").fancybox({type:'iframe'});
        $("a.fancy").fancybox();
    });
    </script>
</body>
</html>

結果は毎回異なります。最初のリンクの IE では、スピナーが表示されてハングします。次の 2 つについては、fancybox ポップアップが表示されますが、空です。私は何を間違っていますか？

4

2 に答える 2

11

このタイプの html の場合、確かに可能です:

<a class="fancypdf" href="path/file.pdf">open pdf</a>

このコードを使用できます：

$(".fancypdf").click(function(){
 $.fancybox({
   type: 'html',
   autoSize: false,
   content: '<embed src="'+this.href+'#nameddest=self&page=1&view=FitH,0&zoom=80,0,0" type="application/pdf" height="99%" width="100%" />',
   beforeClose: function() {
     $(".fancybox-inner").unwrap();
   }
 }); //fancybox
 return false;
}); //click

この方法では、ページに PDF を埋め込む必要はありません。

注: を使用している場合は、PDF ビューアで垂直スクロール バーが 2 つ表示されないように、をHTML5 <!DOCTYPE html>に設定することをお勧めします。これは、HTML5 がマージンを初期化する方法によるものです (上記のコードのオプション、タグを参照してください) 。height99%contentembed

更新:このデモは別の投稿からのものですが、fancybox v2.x で PDF を開きます

編集（2014年4月）：

この回答は1年半以上前のものであることに注意してください（投票者）。それ以来、ブラウザーとそのプラグインは進化し​​ており、iframe 内で PDF を開くことが最も適切なオプションである可能性があります。これを確認してくださいそれでも、一部のシナリオでは埋め込みが適切なソリューションになる場合があります。

于 2012-10-01T23:44:19.047 に答える
0 
That worked for me in IE and Chrome (fancybox 2.x)

//HTML
<a class="fancybox fancybox.iframe"  href="arquivo.pdf">Arquivo</a>

//SCRIPT
$('.fancybox').fancybox({
    autoSize: false,
    width: 960,
    height: 500,
    arrows: false,
    nextClick: false,
    iframe: {
        preload: false // fixes issue with iframe and IE
    },
    helpers : {
    overlay : {
        css : {'background' : 'rgba(0, 0, 0, 0.85)'}
      }
    }   
});
于 2015-04-10T15:23:38.027 に答える