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

Question

Welcome To Ask or Share your Answers For Others

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

posted Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

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

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-23T18:58:58+0000

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!

Categories

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

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

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags