208
¿Cuál es exactamente la diferencia entre el evento window.onload y el evento onload de la etiqueta body? ¿Cuándo uso qué y cómo se debe hacer correctamente?window.onload vs <body onload = "" />
A
Respuesta
201
window.onload = myOnloadFunc y <body onload="myOnloadFunc();"> son formas diferentes de usar el mismo evento. Sin embargo, utilizar window.onload es menos molesto: saca su JavaScript del HTML.
Todas las bibliotecas comunes de JavaScript, Prototype, ExtJS, Dojo, JQuery, YUI, etc. brindan buenos envoltorios alrededor de los eventos que ocurren cuando se carga el documento.Puede escuchar la ventana del evento OnLoad y reaccionar ante eso, pero onLoad no se activa hasta que se hayan descargado todos los recursos, por lo que su controlador de eventos no se ejecutará hasta que se haya obtenido la última imagen enorme. En algunos casos, eso es exactamente lo que quiere, en otros puede encontrar que escuchar cuando el DOM está listo es más apropiado: este evento es similar a onLoad pero se dispara sin esperar a que se descarguen imágenes, etc.
+50
Debe notarse, sin embargo, que hay una diferencia. El evento onload en línea va a llamar 'myOnloadFunc()' en el contexto global ('this' se referirá a' window'). Establecerlo a través de javascript lo hará ejecutar en el contexto de el elemento ('this' se refiere al elemento en el que se desencadenó el evento). En este caso particular, no hará una diferencia, pero lo hará con otros elementos. – mowwwalker
+1
@Walkerneo: Sí, definitivamente vale la pena señalar. Por supuesto, usando una biblioteca JS uno puede anular el objeto al que 'this' se refiere si así lo desea. –
+2
Los comentarios sobre los votos a favor de esta respuesta serían buenos ... –
-12
si desea manipular el DOM, definitivamente use < body onload = "" >. de esta forma, el evento se activará cuando se cargue el DOM. De lo contrario, hay un desfase entre window.onload event y DOM loading para que pueda terminar manipulando objetos que no existen. sugeriría usar jquery y el $(document).ready(function(){}). Esto funciona para la mejor
+4
Eso es incorrecto. Window.onload Sólo se invoca cuando la página ha terminado de cargar. – KernelM
3
Hay ninguna diferencia ...
Así principialmente podría utilizar ambos (uno a la vez -!)
Sin embargo, para facilitar la lectura y para el limpieza del código html. Siempre prefiero window.onload! o]
1
Si está intentando escribir código JS discreto (y debe serlo), entonces no debe usar <body onload="">.
Tengo entendido que los diferentes navegadores manejan estos dos de forma ligeramente diferente pero funcionan de manera similar. En la mayoría de los navegadores, si defines ambos, uno será ignorado.
10
Prefiero, generalmente, a no utilice el evento <body onload="">. Creo que es más limpio mantener el comportamiento separado del contenido tanto como sea posible.
Dicho esto, hay ocasiones (por lo general bastante raro para mí) donde el uso de la carga del cuerpo puede dar un impulso de velocidad leve.
me gusta usar Prototipo así que por lo general poner algo como esto en el <head> de mi página:
document.observe("dom:loaded", function(){
alert('The DOM is loaded!');
});
o
Event.observe(window, 'load', function(){
alert('Window onload');
});
Los anteriores son trucos que aprendí here. Me encanta el concepto de adjuntar manejadores de eventos fuera del HTML.
(Editar para corregir error de ortografía en el código.)
+0
En ocasiones lo que sería más rápido, y por qué? – Kissaki
+0
Esta respuesta parece muy subjetiva con toda la "Yo" ("Prefiero", "Creo"). Que si además carece de hechos objetivos y verificables, más o menos apoya esa impresión. – Kissaki
+1
Me gustaría tomar esta respuesta con un grano de sal teniendo en cuenta que fue publicada durante 6 años atrás. Es más que bienvenido para actualizarlo o publicar su propia respuesta mejorada. –
0
Ambos funcionan de la misma. Sin embargo, tenga en cuenta que si ambos están definidos, solo uno de ellos será invocado. Generalmente evito usar cualquiera de ellos directamente. En su lugar, puede adjuntar un controlador de eventos al evento de carga. De esta forma, puede incorporar más fácilmente otros paquetes JS que también podrían necesitar adjuntar una devolución de llamada al evento onload.
Cualquier JS Framework tendrá métodos de navegador cruzado para controladores de eventos.
0
Es un estándar aceptado para tener el contenido, el diseño y el comportamiento por separado. Entonces window.onload() será más adecuado para usar que <body onload="">, aunque ambos hacen el mismo trabajo.
1
Piense en cargar como cualquier otro atributo. En un cuadro de entrada, por ejemplo, usted podría poner:
<input id="test1" value="something"/>
O se podría llamar:
document.getElementById('test1').value = "somethingelse";
El atributo onload funciona de la misma manera, excepto que toma una función como su valor en lugar de una cadena como el atributo de valor lo hace. Eso también explica por qué puede "usar solo uno de ellos": llamar a window.onload vuelve a asignar el valor del atributo onload para la etiqueta body.
También, al igual que otros aquí están diciendo, por lo general es más limpio para mantener el estilo y javascript separado del contenido de la página, por lo que la mayoría de las personas aconsejan utilizar window.onload o como función de lista de jQuery.
1
< body onload = "" > debe anular window.onload.
Con < body onload = "" >, document.body.onload podría ser nulo, indefinido o una función dependiendo del navegador (aunque getAttribute ("onload") debe ser algo más consistente para conseguir el cuerpo de la función anónima como una cadena). Con window.onload, cuando le asigna una función, window.onload será una función consistente en todos los navegadores. Si eso te importa, usa window.onload.
window.onload es mejor para separar el JS de su contenido de todos modos. No hay muchas razones para usar < body onload = "" > de todos modos cuando puede usar window.onload.
En Opera, el destino del evento para window.onload y < onload cuerpo = "" > (e incluso window.addEventListener ("carga", func, false)) será la ventana en lugar del documento como en Safari y Firefox. Pero, 'esto' será la ventana de los navegadores.
Lo que esto significa es que, cuando es importante, debe envolver el crud y hacer las cosas consistentes o utilizar una biblioteca que lo haga por usted.
26
No hay diferencia, pero no debe usar ninguna.
En muchos navegadores, el evento window.onload no se activa hasta que se hayan cargado todas las imágenes, que no es lo que desea. Los navegadores basados en estándares tienen un evento llamado DOMContentLoaded que se activa antes, pero IE no lo admite (en el momento de escribir esta respuesta). Recomiendo usar una biblioteca de JavaScript que admita una función DOMContentLoaded de navegador cruzado, o encontrar una función bien escrita que pueda usar. jQuery's $(document).ready(), es un buen ejemplo.
+44
Pregunta del futuro ... ¿Qué pasa si no hay jquery? – Sid
+47
Pregunta del presente ... ¿Qué pasa si jQuery es excesivo para el proyecto en cuestión? (No llamo a jQuery, utilícela solo. Algunas veces solo quiero una función de una biblioteca ...) – Bradmage
+13
Cuando dices "no compatible con IE" ¿es eso una verdad universal, o solo cierto para versiones específicas de IE? Dado que muchas cosas han cambiado en el mundo de los navegadores desde que escribió esta respuesta, ¿tal vez es hora de actualizar esta respuesta? –
3
'muchas respuestas subjetivas a una pregunta objetiva. El JavaScript "discreto" es una superstición como la antigua regla de nunca usar los gotos. Escriba el código de una manera que lo ayude a lograr su objetivo de manera confiable, no de acuerdo con las creencias religiosas de moda de alguien.
El que encuentre:
<body onload="body_onload();">
a ser excesivamente molesto es demasiado pretencioso y no tiene claras sus prioridades.
Normalmente pongo mi código JavaScript en un archivo .js separado, pero no encuentro nada engorroso sobre cómo enganchar controladores de eventos en HTML, que es un HTML válido por cierto.
+38
Hay una buena razón para escribir JavaScript no intrusivo. Supongamos que tiene una aplicación web con 100 páginas y utilizó el método
en lugar de colocarlo en el archivo javascript incluido en cada página. Entonces imagine que necesita cambiar el nombre de esa función por alguna razón.Poner el evento en el archivo javascript incluido 1) hace que los cambios sean mucho más simples, y 2) guarda los recursos del servidor ya que los archivos javascript pueden almacenarse en caché durante un año (en un servidor configurado correctamente) en lugar de descargar el mismo código una y otra vez. –+21
Entonces, como no se molesta en aprender por qué se recomienda algo, ¿etiqueta las recomendaciones "creencias religiosas de moda"? – hallvors
+6
La pregunta es "¿cuál es la diferencia entre estos dos métodos?", Junto con una solicitud de recomendación para cuál es mejor. ¿Cómo responde tu respuesta a esa pregunta? –
20
window.onload puede trabajar sin cuerpo. Crea una página con solo las etiquetas de script y ábrela en un navegador. La página no contiene ningún cuerpo, pero todavía funciona ..
<script>
function testSp()
{
alert("hit");
}
window.onload=testSp;
</script>
+6
HTML sin la etiqueta de cuerpo no es válido si realmente agrega contenido (que debe estar en una etiqueta de cuerpo). Además, a su etiqueta de script le falta un tipo. ¡Nunca confíe en que los navegadores arreglen su código que no cumple con las normas! (Como los navegadores pueden hacerlo de manera diferente o no funcionar en el pasado ni en el futuro). – Kissaki
+4
@Kissaki: ¡HTML estándar no necesita una etiqueta corporal en absoluto! –
+5
xhtml1 especifica '' [1] - y html401 especifica ' 'también [2]. html51 establece 'Un elemento de encabezado seguido de un elemento de cuerpo' para contenido html también. [3] http://www.w3.org/TR/xhtml1/dtds.html#a_dtd_XHTML-1.0-Strict http://www.w3.org/TR/xhtml1/dtds.html#a_dtd_XHTML-1.0-Strict http://www.w3.org/TR/html51/semantics.html#the-html-element - Supongo que todas las normas HTML comunes/en uso * do * requieren una etiqueta corporal. :) – Kissaki
2
window.onload - Llamado después de que todos los archivos DOM, JS, Imágenes, Iframes, extensiones y otras completamente cargado. Esto es igual a $ (ventana) .load (función() {});
body onload="" - Llamado una vez DOM cargado. Esto es igual a $ (document) .ready (function() {});
+1
¿Alguien puede obtener esto? He visto esta declaración en muchos foros, pero nunca con un enlace a donde se define en la especificación. – crempp
+1
@crempp Hay [El elemento del cuerpo] (http://www.w3.org/TR/html5/sections.html#the-body-element) y [Atributos globales] (http://www.w3.org /TR/html5/dom.html#global-attributes), así que diría que esto no es cierto. Pero puede probar esto usted mismo, vea http://jsbin.com/OmiViPAJ/1/edit. Allí, puede ver que el evento de carga de la imagen se dispara * antes * del evento de carga del cuerpo. –
+1
Esta respuesta contradice a otras; ¿Puedes proporcionar una fuente? –
Cuestiones relacionadas
- 1. Múltiple <html><body></html></body> en el mismo archivo
- 2. <%# %> vs <%= %>
- 3. ¿Deberían los correos electrónicos HTML comenzar con <html><body><head> ...?
- 4. window.onload vs. body.onload vs. document.onready
- 5. ASP.NET <%= %> vs <%: %>
- 6. ObservableCollection <> vs. List <>
- 7. rieles ERB <%- ... -%> vs <% ... %>
- 8. : <span> vs <label>
- 9. <?> vs <T>
- 10. Page_Load vs OnLoad
- 11. Response.Write vs <%= %>
- 12. <span> vs <figure> vs <area>
- 13. mejores prácticas rieles Erb (<% %> vs <% -%> vs <%- -%>)
- 14. IEnumerable <T> VS VS IList <T> IQueryable <T>
- 15. JavaScript en <head> o justo antes de</body>?
- 16. ¿Es incorrecto colocar la etiqueta <script> después de la etiqueta</body>?
- 17. La aplicación de un fondo de <html> y/o <body>
- 18. ¿Podemos usar <body> en lugar de #container div?
- 19. Obteniendo el primer elemento de <body> luego insertBefore()
- 20. Margen y relleno de <Body> Etiqueta
- 21. XSD Formateo <element><complexType> vs <complexType /><element/>
- 22. Dónde colocar las funciones de JavaScript: <head>? <body>? o, después de</html>?
- 23. iframe comportamiento de onload vs addEventListener ('load')
- 24. Añadir controlador de eventos para body.onload por javascript dentro de <body> parte
- 25. no wrap (head) vs onLoad
- 26. socket-> recv() vs. <>?
- 27. ¿Hay + = para window.onload en Javascript?
- 28. "<>" vs "no en"
- 29. Lista @OneToMany <> vs Set <> diferencia
- 30. WPF ObservableCollection <T> vs BindingList <T>
se debe utilizar "para rodear el valor del atributo –