htmliframefallback

Iframe Fallback Message


I am displaying a locally hosted PDF in an iframe. Most people see the PDF embedded on the page, but there are a few configurations where the user is prompted to download the PDF, leaving a large blank spot where the PDF would be.

I would like to display some kind of a fallback message in those cases but have not been able to find any information regarding fallback for an iframe. I would prefer to avoid javascript but would use it if no other option is available.

My iframe code is <iframe src="PDF-link-here" width="100%" height="800px" marginheight="0" frameborder="0""></iframe>


Solution

  • You are relying on the local machine to know what to do with the PDF file. If you want to make sure the PDF loads in that iframe, you would be best to embed the PDF into the page, instead of calling the PDF directly.

    Change your iframe src to point to a page (a small .htm file) with some basic code:

    <html>
        <head>
            <style type="text/css">
                body { margin: 0 } 
            </style>
        </head>
        <body>
            <embed src="http://www.analysis.im/uploads/seminar/pdf-sample.pdf" width="100%" height="800px" type='application/pdf'>
        </body>
    </html>

    You could change the <embed> to an <object> tag, so that you can include your fallback if a PDF view extension is not loaded, and still include <embed>.

    A quick and easy way, if your PDF is publicly accessible, is to use Google's online PDF viewer.

    <iframe src="https://docs.google.com/gview?url=http://www.yoururl.com/your.pdf&embedded=true" style="height:800px;" marginheight="0" frameborder="0"></iframe>

    That way, you would not need to worry about the local PDF view, and the Google online PDF viewer is all HTML/Javascript.