jqueryhtmlpdfembedgalleriffic

PDF Embedded in <object> or <embed> tag not loading in IE 11

I have to create an Image slider for which I am using:

"Galleriffic plugin > http://www.twospy.com/galleriffic/",

in the Image slider, along with images, I have to show PDFs for some cases.

And to show that, I am putting the <div> which embeds PDF inside "<div class="caption">" where you can show the description related to the image.

For the Slider with PDF, you can see the full code here: http://jsfiddle.net/Z99gr/2/

I am trying to embed the PDF using <object> or <embed> tag, It works fine in Chrome and Firefox. BUT not in IE11.

I am not able to understand what is missing as I have create one more fiddle with just one div which embeds the PDF and its works fine in all three browser, Chrome, Firefox and IE11.

http://jsfiddle.net/dmAM3/1/

Please look into the issue and suggest ASAP what am I missing for IE 11.

Thanks!

Solution

  • I was now able to embed the PDF file IE using "<iframe>" tag.

    I replaced "<object>" and "<embed>" tag with <iframe> and its working fine now with all 3 browsers, Firefox, Chrome and IE.

    There are 2 ways of embedding PDF in IE.

    1st way: Call PDF directly in <iframe>

    Below is the updated code:

    <div id="pdf">
   <iframe src="https://www.adobe.com/products/pdfjobready/pdfs/pdftraag.pdf" style="width: 100%; height: 100%;" frameborder="0" scrolling="no">
        <p>It appears your web browser doesn't support iframes.</p>
   </iframe>
</div>

    2nd way: if the browser doesn't have PDF reader the u can call an HTML page in <iframe> which contains <object> tag .

    Below is the code for 2nd option

        <div id="pdf">
          <iframe src="pdf.html" style="width: 100%; height: 100%;" frameborder="0" scrolling="no">
               <p>It appears your web browser doesn't support iframes.</p>
          </iframe>
   </div>

    Code for "pdf.html"

    <body>
    <object data="lorem.pdf" type="application/pdf">
        <p>It appears you don't have Adobe Reader or PDF support in this web browser. <a href="lorem.pdf">Click here to download the PDF</a>. Or <a href="http://get.adobe.com/reader/" target="_blank">click here to install Adobe Reader</a>.</p>
       <embed src="lorem.pdf" type="application/pdf" />
    </object>
</body>

    This worked for me!!!

    Here is the WORKING Fiddle : http://jsfiddle.net/stmjvz4f/

    Hope it will be helpful for others in future!