¿Cómo activo un evento cuando un iframe ha terminado de cargarse en jQuery?

StackOverflow https://stackoverflow.com/questions/30005

  •  09-06-2019
  •  | 
  •  

Pregunta

Tengo que cargar un PDF dentro de una página.

Lo ideal sería tener un gif animado de carga que se reemplace una vez que se haya cargado el PDF.

¿Fue útil?

Solución

Estoy bastante seguro de que no se puede hacer.

Prácticamente cualquier otra cosa que no sea PDF funciona, incluso Flash.(Probado en Safari, Firefox 3, IE 7)

Demasiado.

Otros consejos

Has probado:

$("#iFrameId").on("load", function () {
    // do something once the iframe is loaded
});

Esto lo hizo por mí (no pdf, sino otro "onload contenido "resistente"): 

<iframe id="frameid" src="page.aspx"></iframe>
<script language="javascript">
    iframe = document.getElementById("frameid");

    WaitForIFrame();

    function WaitForIFrame() {
        if (iframe.readyState != "complete") {
            setTimeout("WaitForIFrame();", 200);
        } else {
            done();
        }
    }

    function done() {
        //some code after iframe has been loaded
    }
</script>

Espero que esto ayude.

Estoy intentando esto y parece funcionar para mí:http://jsfiddle.net/aamir/BXe8C/

Archivo pdf más grande:http://jsfiddle.net/aamir/BXe8C/1/

$("#iFrameId").ready(function (){
    // do something once the iframe is loaded
});

¿Has probado .ready en su lugar?

Probé un enfoque listo para usar para esto, no lo he probado para contenido PDF, pero funcionó para contenido normal basado en HTML, así es como:

Paso 1:Envuelve tu Iframe en un contenedor div

Paso 2:Agregue una imagen de fondo a su contenedor div:

.wrapperdiv{
  background-image:url(img/loading.gif);
  background-repeat:no-repeat;
  background-position:center center; /*Can place your loader where ever you like */
}

Paso 3:en tu etiqueta iframe agregar ALLOWTRANSPARENCY="false"

La idea es mostrar la animación de carga en el div contenedor hasta que el iframe se cargue después de que se haya cargado, el iframe cubriría la animación de carga.

Darle una oportunidad.

Al usar jquery Load y Ready, ninguno parecía coincidir realmente cuando el iframe estaba REALMENTE listo.

terminé haciendo algo como esto

$('#iframe').ready(function () {
    $("#loader").fadeOut(2500, function (sender) {
        $(sender).remove();
    });
});

Donde #loader es un div absolutamente posicionado sobre el iframe con un gif giratorio.

@Alex aw, eso es un fastidio.¿Qué pasa si en tu iframe tenías un documento html que se parecía a:

<html>
  <head>
    <meta http-equiv="refresh" content="0;url=/pdfs/somepdf.pdf" />
  </head>
  <body>
  </body>
</html>

Definitivamente un truco, pero podría funcionar para Firefox.Aunque me pregunto si el evento de carga se activaría demasiado pronto en ese caso.

Esto es lo que hago para cualquier acción y funciona en Firefox, IE, Opera y Safari.

<script type="text/javascript">
  $(document).ready(function(){
    doMethod();
  });
  function actionIframe(iframe)
  {
    ... do what ever ...
  }
  function doMethod()
  {   
    var iFrames = document.getElementsByTagName('iframe');

    // what ever action you want.
    function iAction()
    {
      // Iterate through all iframes in the page.
      for (var i = 0, j = iFrames.length; i < j; i++)
      {
        actionIframe(iFrames[i]);
      }
    }

    // Check if browser is Safari or Opera.
    if ($.browser.safari || $.browser.opera)
    {
      // Start timer when loaded.
      $('iframe').load(function()
      {
        setTimeout(iAction, 0);
      }
      );

      // Safari and Opera need something to force a load.
      for (var i = 0, j = iFrames.length; i < j; i++)
      {
         var iSource = iFrames[i].src;
         iFrames[i].src = '';
         iFrames[i].src = iSource;
      }
    }
    else
    {
      // For other good browsers.
      $('iframe').load(function()
      {
        actionIframe(this);
      }
      );
    }
  }
</script>

Tuve que mostrar un cargador mientras se cargaba el pdf en iFrame, así que lo que se me ocurrió:

    loader({href:'loader.gif', onComplete: function(){
            $('#pd').html('<iframe onLoad="loader.close();" src="pdf" width="720px" height="600px" >Please wait... your report is loading..</iframe>');
    }
    });

Estoy mostrando un cargador.Una vez que esté seguro de que el cliente puede ver mi cargador, llamaré al método de cargadores onCompllet que carga un iframe.Iframe tiene un evento "onLoad".Una vez que se carga el PDF, se activa el evento onloat donde oculto el cargador :)

La parte importante:

iFrame tiene un evento "onLoad" donde puedes hacer lo que necesites (ocultar cargadores, etc.)

Si puede esperar que la interfaz de abrir/guardar del navegador aparezca para el usuario una vez que se complete la descarga, puede ejecutar esto cuando inicie la descarga:

$( document ).blur( function () {
    // Your code here...
});

Cuando el diálogo aparezca en la parte superior de la página, se activará el evento de desenfoque.

Dado que después de cargar el archivo pdf, el documento iframe tendrá un nuevo elemento DOM <embed/>, entonces podemos hacer la verificación así:

    window.onload = function () {


    //creating an iframe element
    var ifr = document.createElement('iframe');
    document.body.appendChild(ifr);

    // making the iframe fill the viewport
    ifr.width  = '100%';
    ifr.height = window.innerHeight;

    // continuously checking to see if the pdf file has been loaded
     self.interval = setInterval(function () {
        if (ifr && ifr.contentDocument && ifr.contentDocument.readyState === 'complete' && ifr.contentDocument.embeds && ifr.contentDocument.embeds.length > 0) {
            clearInterval(self.interval);

            console.log("loaded");
            //You can do print here: ifr.contentWindow.print();
        }
    }, 100); 

    ifr.src = src;
}

La solución que he aplicado a esta situación es simplemente colocar una imagen de carga absoluta en el DOM, que quedará cubierta por la capa de iframe después de cargar el iframe.

El índice z del iframe debe ser (índice z de carga + 1), o simplemente superior.

Por ejemplo:

.loading-image { position: absolute; z-index: 0; }
.iframe-element { position: relative; z-index: 1; }

Espero que esto ayude si ninguna solución de JavaScript lo hizo.Creo que CSS es la mejor práctica para estas situaciones.

Atentamente.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top