¿Es posible abrir un PDF con fancybox 2.1 en IE8?

Estoy trabajando en un sitio que aloja una gran cantidad de archivos PDF y quiero abrirlos en fancybox (2.1) para obtener una vista previa. Funciona bien en Chrome y Firefox. Pero simplemente no funcionará en IE8. Intenté vincular directamente al archivo PDF, vincularlo a un iframe y vincularlo a una etiqueta de inserción (entre otras cosas más locas). No puedo usar google para envolverlos. Aquí hay una página que demuestra el problema.¿Es posible abrir un PDF con fancybox 2.1 en IE8?

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

Los resultados son diferentes cada vez. En IE para el primer enlace aparece y cuelga. Para los segundos dos, aparece una ventana emergente de fancybox, pero está vacía. ¿Qué estoy haciendo mal?

Fuente

2012-10-01 GMK

seguro de que es posible, para este tipo de html:

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

podría utilizar este código:

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

Con este método, no es necesario para incrustar el PDF en el página.

NOTA: Si está utilizando HTML5 <!DOCTYPE html>, recomendaría establecer la height sólo para 99% para evitar una doble barra de desplazamiento vertical en el visor de PDF. Esto se debe a la forma en HTML5 inicializa márgenes (ver la content opción, embed etiqueta en el código anterior)

ACTUALIZACIÓN: this DEMO es desde otro puesto, pero se abre un PDF con v2.xy FancyBox

EDITAR (abril de 2014):

Aviso (abajo-votantes) que esta respuesta es más de un año y medio. Desde entonces, los navegadores y sus complementos han evolucionado y lo más probable es que una mejor opción sea abrir PDF dentro de iframes. Check this No obstante, la inserción puede ser una solución adecuada para algunos escenarios.

Fuente

2012-10-01 23:44:19 JFK

Hermoso. Eso funciona perfectamente. Gracias. – GMK

Por cierto, ¿por qué funciona esto cuando ninguna de las otras cosas que intenté hacer? ¿Qué está pasando detrás de escena aquí? – GMK

detrás de escena estamos construyendo una etiqueta hteml 'embed' (de ahí' type: 'html'') y pasando los mejores parámetros de PDF posibles dentro de ella, todo en este momento disparamos a fancybox así que es por eso que solo necesitas el nombre de el archivo como 'href'. [Consulte este documento] (http://www.adobe.com/content/dam/Adobe/en/devnet/acrobat/pdfs/pdf_open_parameters.pdf) para obtener más información. – 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)'} 
     } 
    } 
});

Fuente

2015-04-10 15:23:38 heavyrick

¿Es posible abrir un PDF con fancybox 2.1 en IE8?

Respuesta

Cuestiones relacionadas