2012-10-01 3 views
5

Я работаю над сайтом, на котором размещается большое количество PDF-файлов, и я хочу открыть их в fancybox (2.1) для предварительного просмотра. Он отлично работает в Chrome и Firefox. Но он просто не будет работать в IE8. Я попытался связать непосредственно с файлом PDF, связавшись с iframe и связавшись с тегом embed (среди других более сумасшедших вещей). Я не могу использовать Google для их переноса. Вот страница, которая демонстрирует проблему.Можно ли открыть PDF с fancybox 2.1 в 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> 

Результаты различны каждый раз. В IE для первой ссылки появляется счетчик и зависает. Для вторых двух появляется всплывающее окно fancybox, но оно пустое. Что я делаю не так?

ответ

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 в вашем стр.

ПРИМЕЧАНИЕ: Если вы используете HTML5 <!DOCTYPE html>, я бы порекомендовал вам установить height только 99%, чтобы избежать двойной вертикальной полосы прокрутки в программе просмотра PDF. Это происходит потому, что путь HTML5 инициализирует поля (см content вариант, embed тег в коде выше)

UPDATE: this DEMO из другого поста, но открывает PDF с FancyBox v2.x


EDIT (апрель 2014 года):

Уведомление (нижестоящие), что этот ответ более полутора лет. С тех пор браузеры и их плагины развились, и, скорее всего, лучшим вариантом является открытие PDF в iframe. Check this Тем не менее, внедрение может быть подходящим решением для некоторых сценариев.

+0

Красивая. Это работает отлично. Спасибо. – GMK

+0

Кстати, почему это работает, когда ни одна другая вещь, которую я пробовал? Что здесь происходит за кулисами? – GMK

+0

За кулисами мы строим тэг 'embed' html (следовательно,' type: 'html'') и передаем наилучшие возможные параметры PDF внутри него, все в момент, когда мы запускаем fancybox, поэтому вот почему вам нужно только имя файл как 'href'. [Проверьте этот документ] (http://www.adobe.com/content/dam/Adobe/en/devnet/acrobat/pdfs/pdf_open_parameters.pdf) для получения дополнительной информации. – JFK

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)'} 
     } 
    } 
}); 
Смежные вопросы