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

javascript jquery internet-explorer embed galleriffic
UID picture UID · Jan 24, 2014 · Viewed 70.1k times · Source

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

Answer

UID picture UID · Jan 28, 2014

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!

Related questions

Check if user is using IE

I am calling a function like the one below by click on divs with a certain class. Is there a way I can check when starting the function if a user is using Internet Explorer and abort / cancel it if …

Read More
How can I prevent the backspace key from navigating back?

On IE I can do this with the (terribly non-standard, but working) jQuery if ($.browser.msie) $(document).keydown(function(e) { if (e.keyCode == 8) window.event.keyCode = 0;}); But is it possible to do in a way which works on Firefox, or …

Read More
Show a message if the browser is not internet explorer 9 or greater

I would like to show my users a bar that looks like this, if: Browser is not IE; or Browser is IE but is version 8 or earlier (Note that the screenshot is just for illustration - IE 9 is supported for …

Read More