Window.onload parece acionar antes que o DOM seja carregado (JavaScript)

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

Pergunta

Estou tendo problemas com a janela.onload e document.onload eventos. Tudo o que li me diz que isso não será acionado até que o DOM esteja totalmente carregado com todos os seus recursos, parece que isso não está acontecendo para mim:

Eu tentei a seguinte página simples no Chrome 4.1.249.1036 (41514) e IE 8.0.7600.16385 com o mesmo resultado: ambos exibiram a mensagem "Falha!", Indicando que o myparagraph não está carregado (e, portanto, o DOM parece incompleto).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <script type="text/javascript">
            window.onload = doThis();
            // document.onload gives the same result

            function doThis() {
                if (document.getElementById("myParagraph")) {
                    alert("It worked!");
                } else {
                    alert("It failed!");
                }
            }
        </script>
    </head>

    <body>
        <p id="myParagraph">Nothing is here.</p>
    </body>
</html>

Estou usando scripts mais complexos do que isso, em um arquivo .js externo, mas isso ilustra o problema. Eu posso fazê -lo funcionar com a janela. Todo mundo diz que sim. Outra solução seria definir um cronômetro que verificará se o DOM é carregado e, se não, ele se chamará meio segundo depois (para que continue checando até que o DOM seja carregado), mas isso me parece muito complexo. Existe um evento mais apropriado para usar?

Foi útil?

Solução

No momento em que a janela é carregada, o corpo ainda não está carregado, portanto, você deve corrigir seu código da seguinte maneira:

<script type="text/javascript">
    window.onload = function(){
        window.document.body.onload = doThis; // note removed parentheses
    };

    function doThis() {
        if (document.getElementById("myParagraph")) {
            alert("It worked!");
        } else {
            alert("It failed!");
        }
    }
</script>

Testado para trabalhar no FF/IE/Chrome, apesar de pensar em lidar document.onload também.

Como já mencionado, o uso do JS-Frameworks será uma ideia muito melhor.

Outras dicas

Apenas use window.onload = doThis; ao invés de window.onload = doThis();

É importante entender que () é um operador, Assim como + ou &&. () Pega uma função e chama isso.

Então, nesse caso, doThis é um objeto de função e () é o operador que chama a função. doThis() Combinado a ligações juntas doThis, executa e avalia o valor de retorno de doThis

Então window.onload = doThis() está basicamente atribuindo o valor de retorno de doThis para window.onload

E assim, para corrigir isso, você precisa fazer referência à própria função, não chamá -la.

Fazer window.onload = doThis

Você já tentou usar uma biblioteca JavaScript, por exemplo, jQuery e os seus $(document).ready() função:

  $(document).ready(function() {
      // put all your jQuery goodness in here.
  });

Depende de onde você coloca a função Onload (cabeça ou tag corporal ou mais abaixo), com a ligação interna de eventos com ver um pouco diferente em diferentes navegadores.

Veja tambémWindow.onload vs document.onload

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