Exatamente quando é que um IFRAME ONLOAD fogo evento?
-
03-07-2019 - |
Pergunta
O evento de fogo onload do IFRAME quando o HTML foi totalmente baixado, ou apenas quando todos os elementos dependentes carregar também? (Css / js / img)
Solução
Os últimos:. Incêndios <body onload=
apenas quando todos os elementos dependentes (CSS / JS / img) foram também carregados
Se você quiser executar o código JavaScript quando o HTML foi carregado, faça isso no final do seu HTML:
<script>alert('HTML loaded.')</script></body></html>
Aqui está um fio relevante de e-mail sobre a diferença entre load e pronto (jQuery suporta ambos).
Outras dicas
A resposta acima (usando o evento de carregamento) está correto, no entanto, em certos casos, isso parece se comportar mal. Especialmente quando gerar dinamicamente um modelo de impressão para web-conteúdo.
tento imprimir certos conteúdos de uma página, criando um iframe dinâmico e imprimi-lo. Se ele contém imagens que eu não posso obtê-lo para disparar quando as imagens são carregadas. Ele dispara sempre muito cedo quando as imagens ainda estão carregando, resultando em uma impressão incompleto:
function printElement(jqElement){
if (!$("#printframe").length){
$("body").append('<iframe id="printframe" name="printframe" style="height: 0px; width: 0px; position: absolute" />');
}
var printframe = $("#printframe")[0].contentWindow;
printframe.document.open();
printframe.document.write('<html><head></head><body onload="window.focus(); window.print()">');
printframe.document.write(jqElement[0].innerHTML);
printframe.document.write('</body></html>');
// printframe.document.body.onload = function(){
// printframe.focus();
// printframe.print();
// };
printframe.document.close();
// printframe.focus();
// printframe.print();
// printframe.document.body.onload = function()...
}
como você pode ver eu tentei vários métodos para ligar o manipulador onload ... em qualquer caso, ele irá disparar muito cedo. Sei disso porque a pré-visualização de impressão do navegador (Google Chrome) contém imagens quebradas. Quando eu cancelar a impressão e chamar essa função novamente (imagens estão agora em cache) a visualização de impressão está bem.
... Felizmente eu encontrei uma solução. não é bonito, mas adequado. O que ele faz que ele verifica a subárvore para tags 'img' e verificar o estado 'completa' das pessoas. se uncomplete atrasa uma nova verificação após 250ms.
function delayUntilImgComplete(element, func){
var images = element.find('img');
var complete = true;
$.each(images, function(index, image){
if (!image.complete) complete = false;
});
if (complete) func();
else setTimeout(function(){
delayUntilImgComplete(element, func);}
, 250);
}
function printElement(jqElement){
delayUntilImgComplete(jqElement, function(){
if (!$("#printframe").length){
$("body").append('<iframe id="printframe" name="printframe" style="height: 0px; width: 0px; position: absolute" />');
}
var printframe = $("#printframe")[0].contentWindow;
printframe.document.open();
printframe.document.write(jqElement[0].innerHTML);
printframe.document.close();
printframe.focus();
printframe.print();
});
}
Apenas quando as cargas de html, e não os elementos dependentes. (Ou então eu acho).
Para fogo quando o resto a página é carregada fazer jQuery (janela) .load (function () {ou window.onload não documentar onready.
Você também pode verificar para ver se um elemento de imagem é carregado e há ... se imagem. load-- etc.