Como aciono um evento quando um iframe termina de carregar no jQuery?

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

  •  09-06-2019
  •  | 
  •  

Pergunta

Eu tenho que carregar um PDF dentro de uma página.

Idealmente, eu gostaria de ter um gif animado de carregamento que fosse substituído assim que o PDF fosse carregado.

Foi útil?

Solução

Tenho certeza de que isso não pode ser feito.

Praticamente qualquer coisa além de PDF funciona, até mesmo Flash.(Testado no Safari, Firefox 3, IE 7)

Muito ruim.

Outras dicas

Você tentou:

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

Isso funcionou para mim (não pdf, mas outro "onload conteúdo 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 isto ajude.

Estou tentando isso e parece estar funcionando para mim:http://jsfiddle.net/aamir/BXe8C/

Arquivo pdf maior:http://jsfiddle.net/aamir/BXe8C/1/

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

você tentou .ready em vez disso?

Eu tentei uma abordagem pronta para uso para isso, não testei para conteúdo PDF, mas funcionou para conteúdo normal baseado em HTML, veja como:

Passo 1:Envolva seu Iframe em um wrapper div

Passo 2:Adicione uma imagem de fundo ao seu wrapper div:

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

etapa 3:em sua tag iframe adicione ALLOWTRANSPARENCY="false"

A ideia é mostrar a animação de carregamento no wrapper div até que o iframe seja carregado depois de carregado, o iframe cobriria a animação de carregamento.

De uma chance.

Usar jquery Load e Ready não parecia realmente corresponder quando o iframe estava VERDADEIRAMENTE pronto.

Acabei fazendo algo assim

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

Onde #loader é um div absolutamente posicionado sobre o iframe com um gif giratório.

@Alex ah, isso é uma chatice.E se no seu iframe você tinha um documento html parecido com:

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

Definitivamente um hack, mas pode funcionar no Firefox.Embora eu me pergunte se o evento load seria acionado muito cedo nesse caso.

Aqui está o que eu faço para qualquer ação e funciona no Firefox, IE, Opera e 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>

Eu tive que mostrar um carregador enquanto o PDF no iFrame estava carregando, então o que eu descobri:

    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>');
    }
    });

Estou mostrando um carregador.Quando tiver certeza de que o cliente pode ver meu carregador, chamarei o método de carregadores onCompllet que carrega um iframe.Iframe tem um evento "onLoad".Depois que o PDF é carregado, ele aciona o evento onloat onde estou escondendo o carregador :)

A parte importante:

iFrame possui evento "onLoad" onde você pode fazer o que precisa (ocultar carregadores etc.)

Se você espera que a interface abrir/salvar do navegador apareça para o usuário assim que o download for concluído, você pode executar isto ao iniciar o download:

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

Quando a caixa de diálogo aparecer no topo da página, o evento de desfoque será acionado.

Como após o carregamento do arquivo pdf, o documento iframe terá um novo elemento DOM <embed/>, então podemos fazer a verificação assim:

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

A solução que apliquei para esta situação é simplesmente colocar uma imagem de carregamento absoluta no DOM, que será coberta pela camada iframe após o carregamento do iframe.

O índice z do iframe deve ser (índice z do carregamento + 1) ou apenas superior.

Por exemplo:

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

Espero que isso ajude se nenhuma solução JavaScript ajudou.Eu acho que CSS é a melhor prática para essas situações.

Atenciosamente.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top