Como faço para triggersr um evento quando um iframe termina de carregar no jQuery?

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

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

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

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

Que pena.

Você tentou:

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

Isso fez isso para mim (não pdf, mas outro conteúdo ” onload resistant”):

   

Espero que isto ajude.

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

Maior arquivo pdf: http://jsfiddle.net/aamir/BXe8C/1/

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

você já experimentou o .ready?

Eu tentei uma abordagem fora da checkbox para isso, eu ainda não testei isso para o conteúdo em PDF, mas funcionou para o conteúdo baseado em HTML normal, aqui está como:

Etapa 1 : envolva seu iframe em um wrapper div

Etapa 2 : adicione uma imagem de plano de fundo ao seu wrapping 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 : na tag ur iframe, adicione ALLOWTRANSPARENCY="false"

A ideia é mostrar a animação de carregamento no div do invólucro até que o iframe carregue depois que ele for carregado. O iframe abrangerá a animação de carregamento.

De uma chance.

Usando o jquery, Load e Ready não pareciam realmente combinar quando o iframe estava realmente pronto.

Acabei fazendo algo assim

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

Onde #loader é uma div absoluta posição sobre o iframe com um spinner gif.

@Alex aw isso é uma chatice. E se no seu iframe você tivesse um documento HTML que se parecesse com:

        

Definitivamente, um hack, mas pode funcionar para o Firefox. Embora eu me pergunto se o evento de carga 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.

  

Eu tive que mostrar um carregador enquanto pdf no iFrame está carregando então o que eu sugiro:

  loader({href:'loader.gif', onComplete: function(){ $('#pd').html(''); } }); 

Estou mostrando um carregador. Quando tiver certeza de que o cliente pode ver meu carregador, estou chamando o método de carregadores de plug-in que carrega um iframe. Iframe tem um evento “onLoad”. Uma vez carregado o PDF, ele aciona o evento onloat, no qual estou escondendo o carregador 🙂

A parte importante:

O iFrame tem um evento “onLoad” onde você pode fazer o que precisa (ocultar carregadores, etc.)

Se você puder esperar que a interface de abertura / gravação do navegador seja exibida para o usuário assim que o download estiver concluído, você poderá executá-lo quando iniciar o download:

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

Quando o diálogo aparecer na parte superior da página, o evento de desfoque será acionado.

Uma vez que o arquivo pdf é carregado, o documento iframe terá um novo elemento DOM , para que possamos 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 a essa situação é simplesmente colocar uma imagem de carregamento absoluta no DOM, que será coberta pela camada de iframe depois que o iframe for carregado.

O índice z do iframe deve ser (z-index 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 fez. Eu acho que CSS é a melhor prática para essas situações.

Cumprimentos.