Problems displaying PDF in iFrame on Mobile Safari

Question

Within our web application we are displaying a PDF document in an iframe using the following line of code:

<iframe id="iframeContainer" src="https://example.com/pdfdoc.pdf" 
                             style="width:100%; height:500px;"></iframe>

This works fine in all the major desktop browsers with the width of the PDF scaling to fit inside the confines of the iFrame and a vertical scroll bar to view all the pages within the document.

At the moment however I can't get the PDF to display correctly in Mobile Safari. In this instance only the top left portion of the PDF is visible without any horizontal or vertical scrollbars to see the rest of the document.

Does anybody know of I workaround for this problem in Mobile Safari?

UPDATE - MARCH 2013

After hours of searching and experimentation I can conclude that this problem is a real mess!! There are a bunch of solutions but each far from perfect. Anybody else struggling with this one I advise to refer to 'Strategies for the iFrame on the iPad Problem'. For me I need to write this one off and look for another solution for our iPad users.

UPDATE - MAY 2015

Just a quick update on this question. Recently I have started using the Google Drive viewer, which has mostly solved the original problem. Just provide a full path to the PDF document and Google will return a HTML formatted interpretation of your PDF (don't forget to set embedded=true). e.g.

https://drive.google.com/viewerng/viewer?embedded=true&url=www.analysis.im%2Fuploads%2Fseminar%2Fpdf-sample.pdf

I'm using this as a fallback for smaller viewports and simply embedding the above link into my <iframe>.

Zacynthus

Regarding your "UPDATE - MAY 2015" - The Google Drive viewer solution works great for me and seems to have solved IOS Safari and Android issues we were having. THANKS! – Aurthur

How does this work though when referencing Google Drive on an iFrame with a different origin? I get an 'X-Frame-Options' to 'sameorigin'. error when trying to embed the Google Drive link. – Postlude

I was thinking this will solve my problem, but I'm getting Preview not available too many times using Google :/ – Gradient

OMG this answer is amazing. It has literally solved the issue with viewing pdfs in both mobile safari as well as webview in ios. [phone] for you. – Dimissory

I asked about this issue in the apple community: discussions.apple.com/thread/250075244 – Redware

Does anyone knows if there's some usage limit for Google Drive viewer? – Vellum

For angular, I use ng2-pdf-viewer to render PDFs. The pdfs display fine in mobile browsers. – Intercom

Getting "Preview not available" – Jillane

Answer 1

I found a new solution. As of iOS 8, mobile Safari renders the PDF as an image within an HTML document inside the frame. You can then adjust the width after the PDF loads:

<iframe id="theFrame" src="some.pdf" style="height:1000px; width:100%;"></iframe>
<script>
document.getElementById("theFrame").contentWindow.onload = function() {
    this.document.getElementsByTagName("img")[0].style.width="100%";
};
</script>

Mashie

You save my day, still on iOS 10 the iFrame is render as img – Hyetal

Also, because it renders as an image and only shows the first page, my initial thought is to save as image, but then the image is blank in camera roll. Not very helpful. – Inglis

Answer 2

My solution for this is to use google drive on mobile and a standard pdf embed in an iframe on larger screens.

.desktop-pdf {
    display: none;
}

.mobile-pdf {
    display: block;
}
@media only screen  and (min-width : 1025px) {

  .mobile-pdf {
      display: none;
  }

  .desktop-pdf {
      display: block;
  }
}

    <div class="outer-pdf" style="-webkit-overflow-scrolling: touch; overflow: auto;">
        <div class="pdf">
            <iframe class="desktop-pdf" scrolling="auto" src="URL HERE" width="100%" height="90%" type='application/pdf' title="Title">
                <p style="font-size: 110%;"><em>There is content being displayed here that your browser doesn't support.</em> <a href="URL HERE" target="_blank"> Please click here to attempt to view the information in a separate browser window. </a> Thanks for your patience!</p>
            </iframe>
            <iframe class="mobile-pdf" scrolling="auto" src="https://drive.google.com/viewerng/viewer?embedded=true&url=URL HERE" width="100%" height="90%" type='application/pdf' title="Title">
                <p style="font-size: 110%;"><em>There is content being displayed here that your browser doesn't support.</em> <a href="URL HERE" target="_blank"> Please click here to attempt to view the information in a separate browser window. </a> Thanks for your patience!</p>
            </iframe>
        </div>
    </div>

Stoned

Answer 3

<iframe
              id="ifamePdf"
              type="application/pdf"
              scrolling="auto"
              src={"https://docs.google.com/viewerng/viewer?url="+"https://example.com/pdfdoc.pdf"+"&embedded=true"}
              height="600"
            ></iframe>

Wendell

Any way to remove the open in new window Arron in top right corner? – Gypsie

Answer 4

For using the google preview in 2021, I had to do the following. Some small adjustments to how it was posted above.

"https://drive.google.com/viewerng/viewer?embedded=true&url=" + encodeURIComponent(pdfUrl)

Scheelite

Answer 5

try pdf.js should also work inside mobile safari: https://github.com/mozilla/pdf.js/

Wimberly

Late to the party, but I've been testing PDF.js on iOS for a while now, and it's painful. The performance is horrendous, and for large documents it uses so much memory that it crashes the browser. – Denature

2023 here, pdf.js still not properly rendering a simple document with large images - having issues, text and parts of images disappearing etc. – Jujube

Answer 6

Adobe's open source PDF Embed API solves these issues for Chrome & Safari on iOS devices, check out PDF Embed API docs to know more

check out PDF Embed API samples to start using the library
React.js: check out PDF Embed API React samples

Don't forget to add <script /> tag from index.html file into your code

<script type="text/javascript" src="https://acrobatservices.adobe.com/view-sdk/viewer.js"></script>

Atkinson

Answer 7

I got the same issue. I found that by setting the focus on an input (doesn't work with div tags) the pdf is displayed.

I fix it by adding an hidden input and set the focus on it. this work around doesn't slowdown the application.

<html><head>
<script>
    $(document).ready(function () {
        $("#myiframe").load(function () { setTimeout(function () { $(".inputforfocus").focus(); }, 100); });
    });
</script></head>
<body>
<div class="main">
    <div class="level1">Learning</div>
    <input type="hidden" class="inputforfocus">
    <div>
        <iframe src="PDF/mypdf.pdf" frameborder="0" id="myiframe" allow="fullscreen"></iframe>
    </div>
</div>
</body>
</html>

Debauchee