2012-10-01 1 views
5

많은 PDF 파일을 호스팅하는 사이트에서 작업 중이며 미리보기를 위해 fancybox (2.1)에서 열려고합니다. 크롬과 파이어 폭스에서 잘 작동합니다. 하지만 IE8에서는 작동하지 않습니다. 필자는 PDF 파일에 직접 연결하고, iframe에 연결하고, embed 태그 (다른 미친 것들 중에서)에 연결하려고했습니다. 나는 그들을 감싸기 위해 구글을 사용할 수 없다. 다음은 문제를 설명하는 페이지입니다.IE8에서 fancybox 2.1로 PDF를 열 수 있습니까?

<!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 팝업이 나타나지만 비어 있습니다. 내가 도대체 ​​뭘 잘못하고있는 겁니까? 이 코드를 사용할 수

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

:

답변

11

은 물론이 HTML 이러한 유형의, 가능하다이 방법

$(".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>를 사용하는 경우, 당신이 당신의 PDF 뷰어에서 이중 수직 스크롤 막대를 피하기 위해 height 단지 99%에 설정하는 것이 좋습니다. HTML5는 여백을 초기화하는 방법은

UPDATE (위의 코드에서 content 옵션 embed 태그 참조) 때문입니다 this DEMO 다른 게시물에서입니다하지만 fancybox의 버전 2.x가있는 PDF를 엽니 다


(2014 년 4 월) :

(대답 유권자)이 답변은 1 년 6 개월 이상 된 것입니다. 그 이후로 브라우저와 플러그인이 진화 해 왔으며 iframe 내에서 PDF를 여는 것이 가장 좋은 방법입니다. 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)'} 
     } 
    } 
});