Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

How do I design a web page so that Firefox 57 will display a PDF in-line

  • 7 replies
  • 2 have this problem
  • 14 views
  • Last reply by cor-el

more options

If I include the following code in a web-page: <iframe src="/Articles/MicrofilmGimp.pdf" type="application/pdf" width="100%" height="600px" /> EVERY other browser except Firefox displays the document in-line. Firefox, however, IGNORES the clear instruction to display the document in the iframe and instead downloads the file to my Downloads directory and with no other notification than the appearance of a blue arrow in the menu bar somehow expects the end-user to understand that they must click on the blue-arrow and open the downloaded file! How do I code a page so that the end-user sees the same result in Firefox that they see in every other browser? Go to https://www.jamescobban.net/displayPage.php?template=/Articles/MicrofilmGimp for a demo of your browser FAILING!

If I include the following code in a web-page: <iframe src="/Articles/MicrofilmGimp.pdf" type="application/pdf" width="100%" height="600px" /> EVERY other browser except Firefox displays the document in-line. Firefox, however, IGNORES the clear instruction to display the document in the iframe and instead downloads the file to my Downloads directory and with no other notification than the appearance of a blue arrow in the menu bar somehow expects the end-user to understand that they must click on the blue-arrow and open the downloaded file! How do I code a page so that the end-user sees the same result in Firefox that they see in every other browser? Go to https://www.jamescobban.net/displayPage.php?template=/Articles/MicrofilmGimp for a demo of your browser FAILING!

Chosen solution

You can file a bug about that specific behavior here: https://bugzilla.mozilla.org/enter_bug.cgi .

Another option that you could use is to directly embed Mozilla's PDF viewer in your page. The PDF viewer is written in Javascript, so you should be able to do the following:

  1. Download the files from here: https://github.com/mozilla/pdf.js/tree/gh-pages and put them on your server somewhere.
  2. In your iframe, link to the "web/viewer.html" file, and add a "?file=" parameter where the value is the URL of the PDF file you want to display.

If you do this, the PDF file will be displayed inline in all browsers (it also has the advantage that you can modify the appearance of the viewer to better match your website).

Read this answer in context 👍 0

All Replies (7)

more options

Your page works on my Firefox 58 on Windows 7. I have the default setting on the Preferences page, "Preview in Firefox", as shown in the attached screenshot. To check your setting:

  • Linux: "3-bar" menu button (or Edit menu) > Preferences
  • Mac: "3-bar" menu button (or Firefox menu) > Preferences
  • Windows: "3-bar" menu button (or Tools menu) > Options
  • Any system: type or paste about:preferences into the address bar and press Enter/Return to load it

Scroll down to the Files and Applications section and in the search box above the scrollable list you can type pdf to filter to that setting.

Is that not working on yours?

more options

No problems here as well on Linux to see the PDF file inline. The file is send correctly as "Content-Type: application/pdf" and Firefox should display the file.

You can reload web page(s) and bypass the cache to refresh possibly outdated or corrupted files.

  • hold down the Shift key and left-click the Reload button
  • press "Ctrl + F5" or press "Ctrl + Shift + R" (Windows,Linux)
  • press "Command + Shift + R" (Mac)
more options

It is completely irrelevant what is happening on my personal browser, because I am not a customer of my site. What is important is the impression delivered to my CUSTOMERS.

If the user has set the option to preview, the page works. But I cannot depend on every customer having that option set and of course my page CANNOT and should not be able to alter the customer's setting. The problem is that for those customers who have specified download instead of preview, many of whom will have completely forgotten that they ever did that, the ONLY indication is a little blue arrow in the menu bar. That is very easy to overlook. Furthermore the exact sequence of actions required to turn on preview in 57 and above, at least on my Linux system, is different from the on-line documentation. Specifically I have to go into "Preferences" rather than "Options".

Since I cannot control what options have been chosen by my customers I need a way to get this page to work even if the customer has turned off preview.

Furthermore while it might make sense to interpret <a href="something.pdf"> as being satisfied by a download rather than just opening the document in the browser window, which is what I believe is the intent of the option, when the page says <iframe src="something.pdf"> or uses <object> or <embed> the clear intent of the web page author is that the document be displayed in the frame REGARDLESS of what the end user has set as an option. My page has no way to tell, short of interrogating the contents of the <iframe> at run-time to tell that the browser chose to ignore my instructions. That is even though the browser decided to ignore my request to view the document in the iframe the text contents of the iframe, intended to be displayed when iframs is not supported by the browser, is NOT displayed, so I cannot even give the customer alternate advice about what to do.

Also why do I need 16 copies of the PDF file in my Downloads directory?

more options

Chosen Solution

You can file a bug about that specific behavior here: https://bugzilla.mozilla.org/enter_bug.cgi .

Another option that you could use is to directly embed Mozilla's PDF viewer in your page. The PDF viewer is written in Javascript, so you should be able to do the following:

  1. Download the files from here: https://github.com/mozilla/pdf.js/tree/gh-pages and put them on your server somewhere.
  2. In your iframe, link to the "web/viewer.html" file, and add a "?file=" parameter where the value is the URL of the PDF file you want to display.

If you do this, the PDF file will be displayed inline in all browsers (it also has the advantage that you can modify the appearance of the viewer to better match your website).

more options

Thank you. I will try that. It has the advantage of guaranteeing as close as possible to the same behavior regardless of browser, barring differences in the implementation of Javascript.

more options

jamescobban said

If the user has set the option to preview, the page works. But I cannot depend on every customer having that option set and of course my page CANNOT and should not be able to alter the customer's setting. The problem is that for those customers who have specified download instead of preview, many of whom will have completely forgotten that they ever did that, the ONLY indication is a little blue arrow in the menu bar. That is very easy to overlook.

The iframe tag supports alternate content (similar to the object tag). In the short run, you could consider using that option to inform the user that the PDF did not load in the frame and here's a link to it. I haven't tested that myself.

more options