Search code examples
javascriptjqueryinternet-explorerembedgalleriffic

PDF embed not working in IE11, but it WORKS when edit the HTML in DOM Explorer (F12 - debug tool of IE)

Here is the Fiddle link "http://jsfiddle.net/Z99gr/2/" which similar to my code, I have created a Image slider using Galleriffic. In the image slider along with images I am showing PDF embedded.

The Fiddle link and my image slider works fine in Chrome and Firefox, but in IE I its not loading. I am testing in IE 11

In IE, when I open the "DOM Explorer (F12 - debug tool of IE)" and selects the <div> which contains the <embed> tag for PDF, it show below code.

   <div id="pdf">
        <embed width="500" height="375" src="https://www.adobe.com/products/pdfjobready/pdfs/pdftraag.pdf" type="application/pdf">
        </embed>
    </div>

And when I just edit anything in this HTML TAG within the "DOM Explorer (F12 - debug tool of IE)", it loads the PDF.

This is a very weird nature of this issue.

I don't understand how to fix this issue.

Please suggest!

I am getting below results inm IE11:

enter image description here

Where as the results should be something like this (its a screencapture from Chrome): enter image description here

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 in page <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/Z99gr/9/

    Hope it will be helpful for others in future!