В нашем веб-приложении мы показываем 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). например
Я использую это как резерв для небольших видовых экранов и просто встраиваю ссылку выше в мой <iframe>.
Я нашел новое решение. Начиная с 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>
try pdf.js также должен работать внутри мобильного сафари: https://github.com/mozilla/pdf.js/
Моим решением для этого является использование 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>
У меня такая же проблема. Я обнаружил, что, установив фокус на вход (не работает с тегами 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>