window.OnLoad vs document.onload [fechado]

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

  •  09-09-2019
  •  | 
  •  

Pergunta

que é mais amplamente suportado:? window.onload ou document.onload

Foi útil?

Solução

Quando eles fogo?

window.onload

  • Por padrão, ele é disparado quando toda a página é carregada, incluindo o seu conteúdo (imagens, CSS, scripts, etc.).

Em alguns navegadores agora assume o papel de document.onload e é acionado quando o DOM está pronto também.

document.onload

  • É chamado quando o DOM está pronto que pode ser antes para imagens e outro conteúdo externo é carregado.

Como assim eles são suportados?

window.onload parece ser o mais amplamente suportado. Na verdade, alguns dos navegadores mais modernos têm em um sentido substituído document.onload com window.onload.

problemas de suporte do navegador são mais propensos a razão pela qual muitas pessoas estão começando a usar bibliotecas como jQuery para lidar com a verificação para o documento estar pronto, assim: 

$(document).ready(function() { /* code here */ });
$(function() { /* code here */ });

Para efeitos de história. window.onload vs body.onload:

Uma pergunta semelhante foi perguntado sobre codingforums um tempo apoiar sobre o uso de window.onload sobre body.onload. o de resultados parecia ser que você deve usar window.onload porque é boa para separar a estrutura da ação.

Outras dicas

A idéia geral é que o window.onload incêndios quando a janela do documento é pronto para a apresentação e document.onload incêndios quando o DOM árvore (construído a partir do código de marcação dentro do documento) é concluída .

Idealmente, assinando DOM-árvore eventos , permite que fora da tela-manipulações através de JavaScript, incorrendo < strong> quase nenhuma carga da CPU . Contrariamente, window.onload pode demorar um pouco para o fogo , quando vários recursos externos ainda têm de ser solicitado, analisado e carregado.

cenário ?Test:

Para observar a diferença e como o seu navegador de escolha implementos acima mencionados evento manipuladores , basta inserir o seguinte código no seu documento de - <body> -. tag 

<script language="javascript">
window.tdiff = []; fred = function(a,b){return a-b;};
window.document.onload = function(e){ 
    console.log("document.onload", e, Date.now() ,window.tdiff,  
    (window.tdiff[0] = Date.now()) && window.tdiff.reduce(fred) ); 
}
window.onload = function(e){ 
    console.log("window.onload", e, Date.now() ,window.tdiff, 
    (window.tdiff[1] = Date.now()) && window.tdiff.reduce(fred) ); 
}
</script>

?Result:

Aqui está o comportamento resultante, observáveis ??para v20 Chrome (e provavelmente navegadores mais atuais).

  • No evento document.onload.
  • incêndios onload duas vezes quando declarados dentro da <body>, uma vez que quando declarados dentro da <head> (onde o evento então age como document.onload).
  • contagem e agindo dependente do estado do contador permite emular ambos os comportamentos de eventos.
  • Em alternativa declarar o manipulador de eventos window.onload dentro dos limites do elemento HTML-<head>.

?Example Projeto:

O código acima foi tirado do base de código (index.html e keyboarder.js) deste projeto .

Para obter uma lista de manipuladores de eventos da janela objeto , por favor consulte a documentação do MDN.

Adicionar Listener de eventos 

<script type="text/javascript">
  document.addEventListener("DOMContentLoaded", function(event) {
      // - Code to execute when all DOM content is loaded. 
      // - including fonts, images, etc.
  });
</script>

Update March 2017

1 Vanilla JavaScript 

window.addEventListener('load', function() {
    console.log('All assets are loaded')
})

2 jQuery 

$(window).on('load', function() {
    console.log('All assets are loaded')
})

Boa sorte.

De acordo com documentos análise de HTML - O fim ,

  1. O navegador analisa o HTML e executa scripts diferidos.

  2. A DOMContentLoaded é despachado no document quando todo o HTML foi analisado e ter executado. O evento bolhas ao window.

  3. Os recursos navegador carrega (como imagens) que atrasam o evento de carregamento.

  4. Um evento load é despachado no window.

Portanto, a ordem de execução será

  1. ouvintes de eventos DOMContentLoaded de window na fase de captura
  2. ouvintes de eventos DOMContentLoaded de document
  3. ouvintes de eventos DOMContentLoaded de window na fase de bolha
  4. ouvintes de eventos load (incluindo manipulador de eventos onload) de window

Um ouvinte de evento bolha load (incluindo manipulador de eventos onload) em document nunca deve ser invocado. Apenas captura de ouvintes load pode ser invocado, mas devido à carga de um sub-recurso como uma folha de estilo, não devido à carga do próprio documento. 

window.addEventListener('DOMContentLoaded', function() {
  console.log('window - DOMContentLoaded - capture'); // 1st
}, true);
document.addEventListener('DOMContentLoaded', function() {
  console.log('document - DOMContentLoaded - capture'); // 2nd
}, true);
document.addEventListener('DOMContentLoaded', function() {
  console.log('document - DOMContentLoaded - bubble'); // 2nd
});
window.addEventListener('DOMContentLoaded', function() {
  console.log('window - DOMContentLoaded - bubble'); // 3rd
});

window.addEventListener('load', function() {
  console.log('window - load - capture'); // 4th
}, true);
document.addEventListener('load', function(e) {
  /* Filter out load events not related to the document */
  if(['style','script'].indexOf(e.target.tagName.toLowerCase()) < 0)
    console.log('document - load - capture'); // DOES NOT HAPPEN
}, true);
document.addEventListener('load', function() {
  console.log('document - load - bubble'); // DOES NOT HAPPEN
});
window.addEventListener('load', function() {
  console.log('window - load - bubble'); // 4th
});

window.onload = function() {
  console.log('window - onload'); // 4th
};
document.onload = function() {
  console.log('document - onload'); // DOES NOT HAPPEN
};

No Chrome, window.onload é diferente de <body onload="">, enquanto eles são os mesmos em ambos os Firefox (versão 35.0) e IE (versão 11).

Você poderia explorar isso pelo seguinte trecho: 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <!--import css here-->
        <!--import js scripts here-->

        <script language="javascript">

            function bodyOnloadHandler() {
                console.log("body onload");
            }

            window.onload = function(e) {
                console.log("window loaded");
            };
        </script>
    </head>

    <body onload="bodyOnloadHandler()">

        Page contents go here.

    </body>
</html>

E você vai ver tanto "janela carregado" (que vem em primeiro lugar) e "onload corpo" no console do Chrome. No entanto, você verá apenas "onload corpo" no Firefox e IE. Se você executar "window.onload.toString()" nos consoles de IE e FF, você verá:

"função onload (event) {bodyOnloadHandler ()}"

O que significa que a atribuição "window.onload = function (e) ..." é substituído.

window.onload e onunload são atalhos para document.body.onload e document.body.onunload

document.onload e manipulador onload em todas tag html parece ser reservados no entanto, nunca disparado

'onload' no documento -> true

window.onload no entanto, eles são muitas vezes a mesma coisa. Da mesma forma body.onload se torna window.onload no IE.

window.onload é o padrão, no entanto -. Navegador da web no PS3 (baseado em Netfront) não suporta o objeto de janela, então você não pode usá-lo lá

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