Проблемы с отображением PDF в iFrame на Mobile Safari

В нашем веб-приложении мы показываем PDF-документ в iframe используя следующую строку кода:

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

Это отлично работает во всех основных настольных браузерах с шириной масштабирования PDF, чтобы вписаться в рамки iFrame и вертикальной полосы прокрутки для просмотра всех страниц в документе.

В настоящий момент, однако, я не могу правильно отобразить PDF в Mobile Safari. В этом случае только верхняя левая часть PDF видна без каких-либо горизонтальных или вертикальных полос прокрутки, чтобы увидеть остальную часть документа.

Кто-нибудь знает об обходном пути для этой проблемы в Mobile Safari?

ОБНОВЛЕНИЕ - МАРТ 2013

После нескольких часов поиска и экспериментов я могу заключить, что эта проблема - настоящий беспорядок! Есть множество решений, но каждый далеко не идеален. Кто-нибудь еще борется с этим, я советую ссылаться на " Стратегии для iFrame по проблеме iPad ". Для меня мне нужно написать это и искать другое решение для наших пользователей iPad.

ОБНОВЛЕНИЕ - МАЯ 2015 ГОДА

Просто быстрое обновление по этому вопросу. Недавно я начал использовать программу просмотра Google Диска, которая в основном решила исходную проблему. Просто укажите полный путь к PDF-документу, и Google вернет интерпретацию PDF вашего формата в формате HTML (не забудьте установить embedded=true). например

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

Я использую это как резерв для небольших видовых экранов и просто встраиваю ссылку выше в мой <iframe>.

Ответ 1

Я нашел новое решение. Начиная с iOS 8, мобильный Safari отображает PDF как изображение внутри HTML-документа внутри фрейма. Затем вы можете отрегулировать ширину после загрузки PDF:

<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>

Ответ 2

try pdf.js также должен работать внутри мобильного сафари: https://github.com/mozilla/pdf.js/

Ответ 3

Моим решением для этого является использование Google Drive на мобильных устройствах и стандартная вставка pdf в iframe на больших экранах.

.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>

Ответ 4

У меня такая же проблема. Я обнаружил, что, установив фокус на вход (не работает с тегами div), отображается pdf.

Я исправляю это, добавляя скрытый ввод и устанавливая фокус на нем. эта работа не замедляет работу приложения.

<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>