Chrome and Firefox are not displaying most PDF documents in an iframe

firefox pdf google-chrome iframe

13,086

Instead of setting the src attribute of the iframe to the PDF, set it to a wrapper HTML-file, which contains a simple div:

<!DOCTYPE html>
<html style="height:100%;">
<head>
</head>
<body style="height:100%;">
    <div id="divContents" style="height:100%;"></div>
</body>
</html>

In javascript the contents of the div is set to an object element. Unfortunately slightly different versions are needed to work reliable on all browsers (tested on IE, Firefox and Chrome):

(I simplified the retrieval of the divContents element and the browser detection)

var embed = '<object type="application/pdf" width="100%" height="100%"';
if (msie) {
    embed += '><param name="src" value="' + pdf + '"/>';
}
else if (chrome) {
    embed += ' src="' + pdf + '">';
}
else {
    embed += ' data="' + pdf + '">';
}
embed += '</object>';
$("#divContents").html(embed);

UPDATED

I've finally found the actual cause of the failure in Chrome: It's the Accept-Ranges:bytes field, without it Chrome will not work when the data attribute is used.

So if your server is capable of supporting the Accept-Ranges field, you should make sure it is returned to the client. In that case you can use the pdfobject library to display the PDF in a frame or div.
If not, you can use the code above to display the PDF in a frame or div.

13,086

Author by

Gene Golovchinsky

Updated on June 05, 2022

Comments

Gene Golovchinsky almost 2 years

I am running Windows 7, 64 bit. I have recently updated my OS to install the latest updates. Since then, most PDF documents have stopped rendering in my program. My program wants to display PDF documents in a separate iFrame. I do this by getting the URL of the PDF document and setting window.frames['docview'].location = url; In most cases, the iframe view remains blank (or clears if something was shown there previously). If I take that same URL and open it in a new tab or window, it renders fine.

When it fails to render in my iframe, I see the following message in the Chrome console:

Resource interpreted as Document but transferred with MIME type application/pdf.

Firefox does not offer a message of any kind in its error console, or on the FireBug console.

I have no control over the source of the PDF files, so I cannot change their header information.

Oddly, some files do load correctly.

Looking at the network requests in Chrome, for a document that fails to load I see (for example):

Request URL:http://es.csiro.au/pubs/paradis_mdm03.pdf
Request Method:GET
Status Code:200 OK

Request Headers
Accept:text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Host:es.csiro.au
Referer:http://querium.fxpal.net:8080/querium/ui/query?searcherId=2&compact=true&sidx=rank&topicId=2&queryId=1&lastEventId=1490893682130103&highlight=undefined
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/535.1 (KHTML, like Gecko) Chrome/13.0.782.220 Safari/535.1

Response Headers
Accept-Ranges:bytes
Connection:Keep-Alive
Content-Length:71764
Content-Type:application/pdf
Date:Tue, 06 Sep 2011 04:59:26 GMT
ETag:"1f48c8-11854-43e4ee482ef40"
Keep-Alive:timeout=15, max=100
Last-Modified:Wed, 07 Nov 2007 04:07:49 GMT
Server:Apache/2.0.55 (Ubuntu) PHP/5.1.2 mod_ssl/2.0.55 OpenSSL/0.9.8a

When opened from a separate tab (where the document does render), I get the following:

Request URL:http://es.csiro.au/pubs/paradis_mdm03.pdf
Request Method:GET
Status Code:304 Not Modified

Request Headers
Accept:text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Cache-Control:max-age=0
Connection:keep-alive
Host:es.csiro.au
If-Modified-Since:Wed, 07 Nov 2007 04:07:49 GMT
If-None-Match:"1f48c8-11854-43e4ee482ef40"
Range:bytes=0-71763
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/535.1 (KHTML, like Gecko) Chrome/13.0.782.220 Safari/535.1

Response Headers
Connection:Keep-Alive
Date:Tue, 06 Sep 2011 05:07:15 GMT
ETag:"1f48c8-11854-43e4ee482ef40"
Keep-Alive:timeout=15, max=100
Server:Apache/2.0.55 (Ubuntu) PHP/5.1.2 mod_ssl/2.0.55 OpenSSL/0.9.8a

One odd things is the difference in status, but maybe the server is being smart or there is some funny interaction with the cache. Who knows.

Any help would be greatly appreciated.

Gene

EDITED: 9/6/2011

When I removed the tag

 <meta http-equiv="content-type" content="text/html; charset=UTF-8">

from the <head> element of my HTML page, many (but not all) of the PDFs started rendering properly. This was an apparent duplicate of another meta tag in the header:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

Does this help shed any light on the potential problem?

Gene Golovchinsky about 11 years

thanks, I will take a look at this strategy when I get back to that project.
mhu about 11 years

The pdfobject library is in essence nothing more than this line of code: targetNode.innerHTML = '<object data="' +url +'" type="application/pdf" width="' +width +'" height="' +height +'"></object>';. Unfortunately this doesn't work in Chrome (see my answer).
Giacomo Tesio about 11 years

@mhu Your example might work or not, but I think you're a bit ungenerous with PDFObject, since it supports Chrome perfectly. Try to visit the examples with Chrome or Firefox.
Giacomo Tesio about 11 years

Mmm... you don't need the iframe if you use PDFObject. Can you share the html you are using (eg via pastebin or jsfiddle)?
mhu about 11 years

I need the iframe in my project. See my answer for the html. If you use the data-attribute in this case, the PDF doesn't show in Chrome, but using the src-attribute is does.
Giacomo Tesio about 11 years

@mhu your answer does not contains iframes.
Giacomo Tesio about 11 years

let us continue this discussion in chat
Giacomo Tesio about 11 years

@mhu take a look here: jsfiddle.net/y9zWf if you run it with chrome, you will get the pdf in the output iframe
mhu about 11 years

It's the Accept-Ranges:bytes field, without it Chrome will not work when the data attribute is used, see my updated answer. I'll grand you the bounty, because testing your example against different servers gave me the insight.