Можно ли открыть PDF-файл с помощью fancybox 2.1 в IE8?

Я работаю над сайтом, на котором размещено много файлов 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 по первой ссылке появляется спиннер и висит. Для вторых двух появляется всплывающее окно fancybox, но оно пустое. Что я делаю неправильно?


jquery internet-explorer fancybox fancybox-2
person GMK    schedule 01.10.2012    source источник

Ответы (1)


arrow_upward
11
arrow_downward

Конечно, это возможно для этого типа 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 в коде выше).

ОБНОВЛЕНИЕ: эта демонстрация взята из другого поста, но открывает PDF с помощью fancybox v2.x

ИЗМЕНИТЬ (апрель 2014 г.):

Обратите внимание (проголосовавшие против), что этому ответу больше полутора лет. С тех пор браузеры и их плагины развивались, и, скорее всего, лучший вариант — открывать PDF в фреймах. Проверьте это Тем не менее, встраивание может быть подходящим решением для некоторых сценариев.

person JFK    schedule 01.10.2012
comment
Кстати, почему это работает, когда ничего из того, что я пробовал, не работает? Что здесь происходит за кулисами? - person GMK; 10.10.2012
comment
за кулисами мы создаем html-тег embed (отсюда type: 'html') и передаем в него наилучшие возможные параметры PDF, все, что в данный момент мы запускаем fancybox, поэтому вам нужно только имя файла как href. Подробнее см. в этом документе. - person JFK; 10.10.2012
comment
DOCTYPE html5 плюс высота: 99% НЕ работали. Я отредактировал ответ, включив scrolling: false, который действительно работает. - person Will Lanni; 24.08.2013
comment
@WillLanni: не редактируйте ответ, вместо этого делайте соответствующие комментарии - person JFK; 24.08.2013
comment
Привет @JFK в IE, как получить 100% масштабирование - person ratnakar; 28.05.2015
comment
@JFK Не могли бы вы сообщить мне, как обрабатывать печать с помощью этого подхода, я имею в виду, что хочу выполнить некоторые действия перед печатью, проверьте следующий вопрос stackoverflow.com/questions/32063339/facny-box-print-callbacks - person ratnakar; 18.08.2015