Les problèmes d'affichage de PDF en iFrame sur le navigateur Safari Mobile

Au sein de notre application web, nous vous présentons un document PDF dans un iframe à l'aide de la ligne de code suivante:

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

Cela fonctionne bien dans tous les principaux navigateurs de bureau, avec la largeur de la PDF de mise à l'échelle pour s'adapter à l'intérieur de l'enceinte de l'iFrame et une barre de défilement verticale pour afficher toutes les pages dans le document.

Pour le moment cependant, je ne peux pas obtenir le PDF pour afficher correctement dans le navigateur Safari Mobile. Dans ce cas, seule la partie supérieure gauche de l'PDF est visible sans horizontal ou vertical des barres de défilement pour voir le reste du document.

Quelqu'un sait de je solution de contournement pour ce problème dans le navigateur Safari Mobile?

MISE À JOUR - MARS 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 chaque loin d'être parfait. Quelqu'un d'autre mal avec celui-ci, je vous conseille de consulter la rubrique"Stratégies pour l'iFrame sur l'iPad Problème'. Pour moi, j'ai besoin d'écrire ce one off et chercher une autre solution, pour que les utilisateurs de l'iPad.

MISE À JOUR - MAI 2015

Rapide mise à jour sur cette question. Récemment, j'ai commencé à l'aide de la visionneuse Google Drive, qui a pratiquement résolu le problème d'origine. Il suffit de fournir un chemin d'accès complet vers le document PDF et Google renverra un format HTML interprétation de vos PDF (n'oubliez pas de mettre embedded=true). par exemple,

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

Je suis en utilisant cela comme une solution de repli pour les petites fenêtres et simplement intégrer le lien ci-dessus dans mon <iframe>.

Concernant votre "mise à JOUR - MAI 2015" - La visionneuse Google Drive solution fonctionne très bien pour moi et semble avoir résolu IOS Safari et Android problèmes que nous avons d'avoir. MERCI!
Comment cela fonctionne, mais quand référencement Google Drive sur un iFrame avec une origine différente? Je reçois un 'X-Frame-Options' to 'sameorigin'. d'erreur lorsque vous essayez d'incorporer le Google Drive lien.
Je pensais cela va résoudre mon problème, mais je suis Preview not available trop de fois à l'aide de Google :/
Le lien vers les "Stratégies pour l'iFrame sur l'iPad Problème" est désormais obsolète, semble comme il a été déplacé ici: blogs.magnolia-cms.com/christopher-zimmermann/...
OMG cette réponse est étonnante. Il a littéralement résolu le problème avec l'affichage des documents pdf à la fois mobile safari ainsi que webview dans ios. +10000000 pour vous.
J'ai demandé sur ce problème dans la pomme de la communauté: discussions.apple.com/thread/250075244

InformationsquelleAutor QFDev | 2013-03-18

10

J'ai trouvé une nouvelle solution. Comme d'iOS 8, le navigateur Safari mobile rend le fichier PDF en une image dans un document HTML à l'intérieur du cadre. Vous pouvez ensuite ajuster la largeur après le PDF charges:
```
<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>
```
- Vous sauver ma journée, toujours sur iOS 10 l'iFrame est rendu img
- Mais il n'affiche que la première page du document PDF...
- Aussi, parce qu'elle rend comme une image et n'affiche que la première page, ma première pensée est pour l'enregistrer en tant qu'image, mais l'image est alors vide dans camera roll. Pas très utile.
InformationsquelleAutor Wes Reimer
2

essayer pdf.js doit également travailler à l'intérieur de mobile safari: https://github.com/mozilla/pdf.js/
- La fin de la partie, mais je l'ai testé PDF.js sur iOS depuis un certain temps maintenant, et c'est douloureux. La performance, c'est une horreur, et pour les grands documents qu'il utilise moins de mémoire qu'il bloque le navigateur.
- mais ne résout pas le problème d'impression
InformationsquelleAutor Mike

Ma solution pour cela est d'utiliser google drive sur mobile et d'un format standard pdf intégrer dans une iframe sur de plus grands écrans.

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

InformationsquelleAutor froggomad

-1

J'ai eu le même problème. J'ai trouvé que par la mise de l'accent sur une entrée (ne fonctionne pas avec des balises div), le pdf s'affiche.

Je résoudre ce problème en ajoutant un caché d'entrée et de définir le focus sur elle. ce travail autour n'a pas de ralentissement de la demande.

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

InformationsquelleAutor user2387011

Vous devez vous connecter pour publier un commentaire.