javascript - form - ¿Cuándo usar "window.onload"?
window.onload=function() javascript (6)
En JavaScript, cuando quiero ejecutar un script una vez que la página se ha cargado, ¿debo usar window.onload o simplemente escribir el script?
Por ejemplo, si quiero tener una ventana emergente, debo escribir (directamente dentro de la etiqueta <script> ):
alert("hello!");
O:
window.onload = function() {
alert("hello!");
}
Ambos parecen ejecutarse justo después de que se carga la página. ¿Cuál es la diferencia?
Aquí está la documentación en MDN .
De acuerdo a esto:
El evento de carga se activa al final del proceso de carga del documento. En este punto, todos los objetos en el documento están en el DOM, y todas las imágenes y sub-marcos han terminado de cargarse.
Su primer fragmento de código se ejecutará tan pronto como el navegador llegue a este punto en HTML.
El segundo fragmento de código se activará cuando el DOM y todas las imágenes estén completamente cargadas (consulte las especificaciones).
Teniendo en cuenta la función alert() , realmente no importa en qué punto se ejecutará (no depende de nada más window objeto window ). Pero si desea manipular el DOM , definitivamente debe esperar a que se cargue correctamente.
El primero solo se ejecuta cuando el navegador llega a él.
El segundo espera a que se cargue la ventana antes de ejecutarla.
En general, debe hacer lo segundo, pero debe adjuntar un detector de eventos en lugar de definir la función. Por ejemplo:
window.addEventListener(''load'',
function() {
alert(''hello!'');
}, false);
Eso depende de si desea que se ejecute cuando se encuentre el elemento de script o de que se ejecute cuando se dispare el evento de carga (que es después de que se haya cargado todo el documento (incluyendo cosas como imágenes)).
Tampoco está siempre bien.
En general, sin embargo, evitaría asignar funciones directamente a onload a favor de usar addEventListener (con bibliotecas de compatibilidad si fuera necesario para admitir navegadores más antiguos).
La razón para esperar a que se cargue el DOM es para que pueda apuntar a cualquier elemento que se cargue después de su script. Si solo estás creando una alert , no importa. Digamos, sin embargo, que estaba apuntando a un div que estaba en su marca después de su script, obtendría un error si no espera hasta que se cargue esa parte del árbol DOM.
document.ready es una excelente alternativa a window.onload si está utilizando jQuery.
Vea aquí: window.onload vs $ (document) .ready ()
Las otras respuestas parecen todas desactualizadas.
En primer lugar, colocar scripts en la parte superior y usar window.onload es un antipatrón. Lo que queda de los días de IE en el mejor de los casos o la mala comprensión de JavaScript y el navegador en el peor.
Simplemente puede mover sus scripts al final de su html
<html>
<head>
<title>My Page</title>
</head>
<body>
content
</body>
<script src="some-external.js"></script>
<script>
some in page code
</script>
</html>
La única razón por la que la gente usó window.onload es porque creyeron erróneamente que los scripts debían ir en la sección principal. Debido a que las cosas se ejecutan en orden si su script estaba en la sección principal, entonces el cuerpo y su contenido aún no existían por definición de ejecutar en orden .
La solución alternativa fue utilizar window.onload para esperar a que se cargue el resto de la página. Mover su script al final también solucionó ese problema y ahora no es necesario usar window.onload ya que su cuerpo y contenido ya se habrán cargado.
La solución más moderna es usar la etiqueta de defer en sus scripts, pero usar que sus scripts necesitan para ser todos externos.
<head>
<script src="some-external.js" defer></script>
<script src="some-other-external.js" defer></script>
</head>
Esto tiene la ventaja de que el navegador comenzará a descargar los scripts inmediatamente y los ejecutará en el orden especificado, pero esperará para ejecutarlos hasta después de que la página se haya cargado, sin necesidad de window.onload o la window.addEventListener(''load'', ... mejor pero aún no necesaria window.addEventListener(''load'', ...
Tienes tres alternativas:
Directamente dentro de la etiqueta del script lo ejecuta tan pronto como se analiza.
Inside
document.addEventListener( "DOMContentLoaded", function(){});lo ejecutará una vez que el DOM esté listo.Inside
window.onload function(){})se ejecutará tan pronto como se carguen todos los recursos de la página.