Question

23

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

rated 0 times [ 28] [ 5] / answers: 1 / hits: 70969 / 11 Years ago, fri, january 24, 2014, 12:00:00

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

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

anayaashleyh

Add To Favorites

Follow

Total Points: 597

Total Questions: 96

Total Answers: 86

Location: Papua New Guinea

Member since Thu, Jul 9, 2020

4 Years ago

answered 11 Years ago martin · Accepted Answer

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!