Search code examples
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

  • Your 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'd be best to embed the PDF into the page instead of calling the PDF directly.

    Change your iframe src to point to a page (small .htm files) With some basic code

    <html>
    <header>
    <style type="text/css">
    <!-- 
    BODY {margin: 0} 
    -->
    </style>
    </header>
    
    <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 the object tag so that you can include your fallback if a PDF view extension is not loaded, and still include embed.

    A really 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 don't have to worry at all about the local PDF view and the Google online PDF viewer is all HTML/Javascript.