Dentro de nuestra aplicación web que estamos visualizando un documento PDF en un iframe mediante la siguiente línea de código:

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

Esto funciona bien en todos los principales navegadores de internet con el ancho de la PDF de escala para que se ajuste dentro de los confines del iFrame y una barra de desplazamiento vertical para ver todas las páginas en el documento.

Por el momento sin embargo no puedo conseguir el PDF para que se muestren correctamente en Mobile Safari. En este ejemplo sólo la parte superior izquierda de la PDF es visible sin ningún tipo horizontal o vertical de la barra de desplazamiento para ver el resto del documento.

¿Alguien sabe de I solución para este problema en Mobile Safari?

DE ACTUALIZACIÓN MARZO 2013

Después de horas de búsqueda y experimentación puedo concluir que este problema es un verdadero desastre!! Hay un montón de soluciones, pero cada lejos de ser perfecto. Nadie luchando con esto que me aconsejas para referirse a ‘Estrategias para el iFrame en el iPad Problema‘. Para mí tengo que escribir este one-off y a buscar otra solución para nuestros usuarios de iPad.

DE LA ACTUALIZACIÓN DE MAYO DE 2015

Sólo una rápida actualización sobre esta cuestión. Recientemente he empezado a utilizar Google Drive viewer, que en su mayoría ha resuelto el problema original. Acaba de proporcionar una ruta de acceso completa al documento PDF y Google mostrará un formato de HTML interpretación de su PDF (no olvides poner embedded=true). por ejemplo,

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

Estoy usando esto como un retroceso para las pequeñas ventanas y simplemente incrustar el enlace de arriba en mi <iframe>.

  • Con respecto a su «ACTUALIZACIÓN de MAYO de 2015» – Google Drive viewer solución funciona muy bien para mí y parece que se ha solucionado IOS Safari y Android los problemas que estaban teniendo. GRACIAS!
  • ¿Cómo funciona esto a pesar de que cuando se hace referencia a Google Drive en un iFrame con un origen diferente? Puedo obtener una 'X-Frame-Options' to 'sameorigin'. de error cuando intenta incrustar el Google de la Unidad de enlace.
  • Yo estaba pensando que esto va a resolver mi problema, pero me estoy poniendo Preview not available muchas veces el uso de Google :/
  • El enlace a «Estrategias para el iFrame en el iPad Problema» está desactualizado, parece que se ha movido aquí: blogs.magnolia-cms.com/christopher-zimmermann/…
  • OMG esta respuesta es increíble. Es literalmente ha resuelto el problema con la visualización de archivos pdf en ambos mobile safari así como webview en ios. +10000000 para usted.
  • Me preguntó acerca de este problema en la manzana de la comunidad: discussions.apple.com/thread/250075244

InformationsquelleAutor QFDev | 2013-03-18

4 Comentarios

  1. 10

    He encontrado una nueva solución. Como de iOS 8, mobile Safari muestra el archivo PDF como una imagen dentro de un documento HTML dentro del marco. A continuación, puede ajustar la anchura después de que el PDF se carga:

    <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>
    • Me salvaste el día de hoy, todavía en iOS 10 el iFrame del render como img
    • Pero sólo se muestra la primera página del documento PDF…
    • También, porque se representa como una imagen y sólo se muestra la primera página, mi primer pensamiento es para guardar como imagen, pero la imagen está en blanco en rollo de la cámara. No es muy útil.
  2. 2

    intentar pdf.js también debe trabajar dentro de mobile safari: https://github.com/mozilla/pdf.js/

    • Tarde a la fiesta, pero la he estado probando PDF.js en iOS por un tiempo ahora, y es doloroso. El rendimiento es horrendo, y documentos de gran tamaño que se usa mucha memoria que se bloquea el navegador.
    • pero no resuelve el problema de impresión
  3. 0

    Mi solución para esto es utilizar google drive en el móvil y un estándar pdf incrustar en un iframe en pantallas más grandes.

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

    Tengo el mismo problema. Me pareció que al establecer el foco en una entrada (no funciona con etiquetas div) se muestra el pdf.

    Puedo solucionarlo mediante la adición de una entrada ocultos y establecer el foco en él. este trabajo alrededor no la desaceleración de la aplicación.

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

Dejar respuesta

Please enter your comment!
Please enter your name here