window.onload parece activarse antes de que se cargue DOM (JavaScript)

Tengo problemas con los eventos window.onload y document.onload. Todo lo que leo me dice que esto no se disparará hasta que el DOM esté completamente cargado con todos sus recursos, parece que esto no me sucede:window.onload parece activarse antes de que se cargue DOM (JavaScript)

Intenté la siguiente página simple en Chrome 4.1.249.1036 (41514) y IE 8.0.7600.16385 con el mismo resultado: ambos mostraban el mensaje "¡Falló!", Lo que indica que myParagraph no está cargado (por lo que 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>

Estoy usando scripts más complejos que este, en un archivo .js externo, pero esto ilustra el problema. Puedo hacer que funcione teniendo window.onload establecer un temporizador de medio segundo para ejecutar doThis(), pero esto parece una solución poco elegante, y no responde la pregunta de por qué window.onload no parece hacer lo que todos dicen que sí. Otra solución sería establecer un temporizador que verifique si el DOM está cargado, y si no se llamará solo medio segundo más tarde (por lo que seguirá revisando hasta que se cargue el DOM), pero esto me parece demasiado complejo. ¿Hay algún evento más apropiado para usar?

Fuente

2010-03-20 David Mason

primer error que veo es que assing [resultado de la función] en lugar de [Función] sí mismo.¿Puedes ver 'doThis()' es una declaración que devuelve indefinido después de la evaluación porque 'doThis' no tiene operador' return'. 'window.onload = doThis;' hará el trabajo. Tenga en cuenta que no hay paréntesis – Dan

@DavidMason W3Schools es una fuente de información deficiente. No están afiliados con el W3C de ninguna manera. * No * trate w3schools como una fuente autorizada de información, trátelas de la manera en que merecen ser tratadas: vínculos molestos que debe omitir cuando busca un sitio web de referencia real. – doug65536

@ doug65536 en la actualidad yo estoy completamente de acuerdo. Recomiendo w3fools.com para cualquiera que no esté seguro. Tiendo a ir directamente a developer.mozilla.org para obtener información de alta calidad en estos días, luego hago una búsqueda más extensa si no encuentro lo que estoy buscando allí (que generalmente es cuando estoy tratando de hacer algo ridículo) Estoy bastante avergonzado de que el pasado haya publicado ... ¡pero puedo borrarlo! Allí, una referencia menos ingenua a w3schools en Internet :) Gracias por detectarlo. –

En la ventana de tiempo se carga el cuerpo no está siendo cargado por lo tanto, usted debe corregir el código de la siguiente manera:

<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>

probado para funcionar en FF/IE/Chrome, aunque también piensa en manejar document.onload.

Como ya se mencionó, usar js-frameworks será una idea mucho mejor.

Fuente

2010-03-21 00:14:22 Li0liQ

Gracias, eso parece resolver mi problema, y resuelve lo que pensé era una repetición del mismo problema de adjuntar algo al cuerpo. Descargue el evento antes de saber si el cuerpo se ha cargado con éxito. Ahora tengo el mensaje "¡Funcionó!" apareciendo, y puede continuar pedante manteniendo mis scripts y marcas agradables y separadas. –

funcionó para mí también, gracias amigo! – foxybagga

Tenga en cuenta que el uso de este enfoque para 2 scripts probablemente sobrescribirá uno con el otro. Estos días tiendo a usar document.addEventListener ("DOMContentLoaded", función (evento) { console.log ("DOM completamente cargado y analizado"); }); Consulte: https://developer.mozilla.org/en-US/docs/Web/Reference/Events/DOMContentLoaded –

¿Ha intentado utilizar una biblioteca de JavaScript en su lugar, p. jQuery y es $(document).ready() función:

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

Fuente

2010-03-21 00:00:17 M4N

Gracias, lo comprobaré esta semana. Todavía me preocupa que no haya ningún evento asociado con el DOM que pueda decirme con fiabilidad cuándo se ha cargado DOM, sin recurrir a scripts de terceros. –

Definitivamente es excesivo agregar una biblioteca solo para esto: la descarga de la biblioteca agrega latencia y transferencia de datos y probablemente solo le ahorre algunos caracteres. jQuery es particularmente pesado. Habiendo dicho eso, si ya está usando una biblioteca para otras cosas, probablemente haya poco o ningún daño al usarla para manejar la conexión de una función al evento dom-ready. –

@David Mason Estoy totalmente de acuerdo. La mayoría de los casos, he encontrado el tiempo de carga de la página de jquery DOUBLES. –

sólo tiene que utilizar window.onload = doThis; en lugar de window.onload = doThis();

Fuente

2010-06-04 12:13:03 dgk

para obtener más información acerca de por qué, consulte esto: http://stackoverflow.com/questions/8830074/what- is-the-different-between-window-onload-init-and-window-onload-init – Cymbals

Depende donde se coloca la función onload (cabeza o el cuerpo de la etiqueta o más abajo), con el evento interno vinculante seeemingly ligeramente diferente en diferentes navegadores.

Ver también window.onload vs document.onload

Fuente

2011-09-10 12:37:38

Es importante entender que () es un operador , al igual que + o &&. () Toma una función y la llama.

Entonces, en ese caso, doThis es un objeto de función y () es el operador que llama a la función. doThis() combinaron para juntas llama doThis, lo ejecuta y evalúa el valor de retorno de doThis

Así window.onload = doThis() es, básicamente, asignando el valor de retorno de doThis a window.onload

Y por lo tanto, para arreglar eso, es necesario hacer referencia a la funcionar en sí mismo, no llamarlo.

Haz window.onload = doThis

Fuente

2016-07-04 02:17:31 OverCoder

Esta debería ser la respuesta. –

window.onload parece activarse antes de que se cargue DOM (JavaScript)

Respuesta

Cuestiones relacionadas