Problèmes d'affichage de PDF dans iFrame sur les safaris mobiles
dans notre application web, nous affichons un document PDF dans un iframe utilisant la ligne de code suivante:
<iframe id="iframeContainer" src="https://example.com/pdfdoc.pdf"
style="width:100%; height:500px;"></iframe>
cela fonctionne très bien dans tous les principaux navigateurs de bureau avec la largeur de la mise à l'échelle PDF pour s'adapter à l'intérieur des limites de l'iFrame et une barre de défilement verticale pour voir toutes les pages dans le document.
pour le moment cependant je ne peux pas obtenir le PDF pour s'afficher correctement dans le Safari Mobile. Dans ce cas, seule la partie supérieure gauche du PDF est visible sans aucune barre de défilement horizontale ou verticale pour voir le reste du document.
Est-ce que quelqu'un sait que j'ai contourné ce problème dans le Safari Mobile?
UPDATE-MARCH 2013
Après des heures de recherche et d'expérimentation, je peux conclure que ce problème est un vrai bordel!! Il y a un tas de solutions mais chacune est loin d'être parfaite. Si quelqu'un d'autre lutte avec celui-ci, je lui conseille de se référer à"Stratégies pour l'iFrame sur le problème de l'iPad'. Pour moi, j'ai besoin d'écrire celui-ci et de chercher une autre solution pour nos utilisateurs d'iPad.
UPDATE-MAY 2015
juste une mise à jour rapide sur cette question. Récemment, j'ai commencé à utiliser le visualiseur de GoogleDrive, ce qui a pour la plupart résolu le problème original. Il suffit de fournir un chemin complet vers le document PDF et Google retournera une interprétation de votre PDF en format HTML (n'oubliez pas de définir ). par exemple
https://drive.google.com/viewerng/viewer?embedded=true&url=www.analysis.im%2Fuploads%2Fseminar%2Fpdf-sample.pdf
Je l'utilise comme repli pour les petits viewports et j'intègre simplement le lien ci-dessus dans mon <iframe>.
3 réponses
j'ai trouvé une nouvelle solution. À partir de iOS 8, mobile Safari rend le PDF comme une image dans un document HTML à l'intérieur du cadre. Vous pouvez ensuite ajuster la largeur après les chargements 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>
pdf.js convient également de travailler à l'intérieur de mobile safari: https://github.com/mozilla/pdf.js/
j'ai eu le même problème. J'ai trouvé qu'en mettant l'accent sur une entrée (ne fonctionne pas avec les balises div) le pdf est affiché.
je le corrige en ajoutant une entrée cachée et en mettant le focus dessus. ce travail ne ralentit pas l'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>