Exatamente quando é que um IFRAME ONLOAD fogo evento?

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

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)

Foi útil?

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.

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