2012-10-01 26 views
5

मैं ऐसी साइट पर काम कर रहा हूं जो बहुत सी पीडीएफ फाइलों को होस्ट करता है और मैं उन्हें पूर्वावलोकन के लिए fancybox (2.1) में खोलना चाहता हूं। यह क्रोम और फ़ायरफ़ॉक्स में ठीक काम करता है। लेकिन यह सिर्फ आईई 8 में काम नहीं करेगा। मैंने सीधे पीडीएफ फ़ाइल से लिंक करने, आईफ्रेम से लिंक करने और एक एम्बेड टैग (अन्य पागल चीजों के बीच) से जोड़ने का प्रयास किया है। मैं उन्हें लपेटने के लिए गूगल का उपयोग नहीं कर सकता। यहां एक पृष्ठ है जो समस्या का प्रदर्शन करता है।क्या IE8 में fancybox 2.1 के साथ एक पीडीएफ खोलना संभव है?

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

परिणाम हर बार अलग होते हैं। आईई में पहले लिंक के लिए स्पिनर प्रकट होता है और लटकता है। दूसरे दो के लिए, एक फैंक्सबॉक्स पॉपअप प्रकट होता है, लेकिन यह खाली है। मैं क्या गलत कर रहा हूं?

उत्तर

11

ज़रूर यह संभव है, एचटीएमएल के इस प्रकार के लिए:

<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 

, आप में पीडीएफ एम्बेड करने के लिए की जरूरत नहीं है अपने पृष्ठ।

नोट: आप HTML5 <!DOCTYPE html> उपयोग कर रहे हैं, मैं तुम्हें height सिर्फ 99% करने के लिए सेट करने के लिए अपने PDF व्यूअर में एक डबल ऊर्ध्वाधर स्क्रॉल पट्टी से बचने के लिए सिफारिश करेंगे। इसका कारण यह है जिस तरह से एचटीएमएल 5 initializes मार्जिन

अद्यतन (content विकल्प, embed ऊपर कोड में टैग देखें): this DEMO एक और पद से है, लेकिन fancybox v2.x साथ एक पीडीएफ खोलता


संपादित करें (अप्रैल 2014):

सूचना (नीचे-मतदाताओं) है कि इस सवाल का जवाब एक से अधिक और एक आधा साल पुराना है। तब से ब्राउज़र और उनके प्लगइन्स विकसित हुए हैं और संभवतः आईफ्रेम के भीतर पीडीएफ खोलने का बेहतर विकल्प है। Check this फिर भी, कुछ परिदृश्यों के लिए एम्बेडिंग एक उपयुक्त समाधान हो सकता है।

+0

सुंदर। यह पूरी तरह से काम करता है। धन्यवाद। – GMK

+0

संयोग से, यह तब क्यों काम करता है जब मैंने कोशिश की कोई अन्य चीज नहीं की? दृश्यों के पीछे क्या चल रहा है? दृश्यों के पीछे – GMK

+0

हम एक 'एम्बेड' एचटीएमएल टैग (इसलिए 'टाइप:' एचटीएमएल'') बना रहे हैं और इसके अंदर संभव सर्वोत्तम पीडीएफ पैरामीटर पास कर रहे हैं, पल में सबकुछ हम फेंसीबॉक्स को फायर करते हैं, इसलिए आपको केवल नाम की आवश्यकता है फ़ाइल '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)'} 
     } 
    } 
});