Cuándo usar " ventana.onload"?
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 cargar la página. ¿Cuál es la diferencia?
6 answers
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 la segunda, pero debe adjuntar un detector de eventos en lugar de definir la función. Por ejemplo:
window.addEventListener('load',
function() {
alert('hello!');
}, false);
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-02-22 01:49:07
Las otras respuestas parecen desactualizadas
En primer lugar, poner scripts en la parte superior y usar window.onload es un anti-patrón. Es sobrante de los días de IE en el mejor o mal entendimientos de JavaScript y el navegador en el peor.
Puedes mover tus scripts al final de tu 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 erróneamente creyeron que los scripts debían ir en la sección head. Porque las cosas se ejecutan en orden si su script estaba en la sección head, luego el cuerpo y su contenido aún no existían por definición de ejecutar en orden.
La solución de hacky era usar window.onload para esperar a que el resto de la página se cargara. Mover su script a la parte inferior también resolvió ese problema y ahora no hay necesidad de usar window.onload ya que su cuerpo y contenido ya se habrán cargado.
La solución más moderna es usar la etiqueta defer en sus scripts, pero para usar que sus scripts deben ser todos externo.
<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á a ejecutarlos hasta después de que la página se haya cargado, sin necesidad de window.onload o lo mejor, pero aún innecesario window.addEventListener('load', ...
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-01-15 02:28:56
Aquí está la documentación de sobre MDN.
Según ella:
El evento load se activa al final del proceso de carga del documento. En este punto, todos los objetos del 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 activará una ventana emergente cuando el DOM y todas las imágenes estén completamente cargadas (consulte specs).
Considerando la función alert(), realmente no importa en qué punto se ejecutará (no depende de nada aparte del objeto window). Pero si desea manipular el DOM - definitivamente debe esperar a que se cargue correctamente.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-02-23 13:32:27
Eso depende de si desea que se ejecute cuando se encuentre el elemento script o si desea que se ejecute cuando se inicie el evento load (que es después de que se haya cargado todo el documento (incluidas cosas como imágenes)).
Ninguno es siempre correcto.
En general, sin embargo, evitaría asignar funciones directamente a onload a favor de usar addEventListener (con bibliotecas de compatibilidad si necesitaba admitir navegadores más antiguos).
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-11-24 20:02:58
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 un alert, no importa. Digamos, sin embargo, que estaba apuntando a un div que estaba en su marcado después de su script, obtendría un error si no espera hasta que se cargue esa pieza del árbol DOM.
document.ready es una gran alternativa a window.onload si estás usando jQuery.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 12:10:26
Tienes tres alternativas:
Directamente dentro de la etiqueta del script se 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.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-11-24 20:06:09