Ist es möglich, ein PDF mit fancybox 2.1 in IE8 zu öffnen?

Ich arbeite an einer Website, die viele PDF-Dateien hostet und ich möchte sie in fancybox (2.1) für eine Vorschau öffnen. Es funktioniert gut in Chrome und Firefox. Aber es wird einfach nicht in IE8 funktionieren. Ich habe versucht, direkt auf die PDF-Datei zu verlinken, zu einem iframe zu verlinken und zu einem embed-Tag zu verlinken (neben anderen verrückten Dingen). Ich kann Google nicht verwenden, um sie zu umhüllen. Hier ist eine Seite, die das Problem zeigt.Ist es möglich, ein PDF mit fancybox 2.1 in IE8 zu öffnen?

<!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>

Die Ergebnisse sind jedes Mal anders. In IE für den ersten Link erscheint der Spinner und hängt. Für die zweiten beiden erscheint ein Fancybox Popup, aber es ist leer. Was mache ich falsch?

Quelle

2012-10-01 GMK

Sicher ist es möglich, für diese Art von html:

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

Sie diesen Code verwenden:

$(".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

Bei dieser Methode müssen Sie nicht die PDF-Datei einbetten in Ihrem Seite.

HINWEIS: Wenn Sie HTML5 <!DOCTYPE html> verwenden, würde ich empfehlen Ihnen eine doppelte vertikale Bildlaufleiste in Ihrem PDF-Viewer die height nur 99% zu vermeiden einzustellen. Dies liegt daran, die Art und Weise HTML5 Margen initialisiert (siehe content Option, embed Tag im Code oben)

UPDATE: this DEMO aus einem anderen Beitrag ist aber öffnet sich ein PDF mit fancybox v2.x

EDIT (April 2014):

Beachten Sie (down-Wähler), dass diese Antwort mehr als eineinhalb Jahre alt ist. Seitdem haben sich Browser und ihre Plugins weiterentwickelt, und wahrscheinlich ist es eine bessere Option, PDF innerhalb von iframes zu öffnen. Check this Dennoch kann die Einbettung für einige Szenarien eine geeignete Lösung sein.

Quelle

2012-10-01 23:44:19 JFK

Schön. Das funktioniert perfekt. Vielen Dank. – GMK

Übrigens, warum funktioniert das, wenn keines der anderen Dinge, die ich versucht habe, funktioniert? Was passiert hier hinter den Kulissen? – GMK

hinter den Kulissen bauen wir ein 'embed' html Tag (daher' type: 'html'') und übergeben die bestmöglichen PDF Parameter darin, alles in dem Augenblick, in dem wir fancybox feuern, deshalb brauchen Sie nur den Namen von die Datei als 'href'. [Weitere Informationen finden Sie in diesem Dokument] (http://www.adobe.com/content/dam/Adobe/en/devnet/acrobat/pdfs/pdf_open_parameters.pdf). – JFK

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)'} 
     } 
    } 
});

Quelle

2015-04-10 15:23:38 heavyrick

Ist es möglich, ein PDF mit fancybox 2.1 in IE8 zu öffnen?

Antwort

Verwandte Themen