Añadir controlador de eventos para body.onload por javascript dentro de <body> parte

Queremos incluir un mapa de la API de Google Maps en nuestro documento. La documentación indica inicializar el mapa con una función llamada por el evento onload() del cuerpo.Añadir controlador de eventos para body.onload por javascript dentro de <body> parte

La forma ordinaria para llamar:

<body onload="initialize_map();">

Esto no funciona para nosotros, ya que estamos usando la plantilla :: Toolkit y la etiqueta <body> ya está incluido en nuestra envoltura. En resumen: la etiqueta <body> ya está impresa cuando nuestro código JavaScript comienza a ejecutarse.

Intenté algo como esto pero solo funciona para onclick, no onload. Supongo que es porque el código javascript está debajo de la etiqueta <body>.

var body = document.getElementsByTagName("body")[0]; 

body.addEventListener("load", init(), false); 

function init() { 
     alert("it works!"); 
};

Cualquier ayuda sobre cómo encender un mapa de Google Maps, ¡apreciada!

Fuente

2011-02-22 Daniel Böhmer

Como ya estábamos usando jQuery para una característica gráfica de ojos dulces que terminamos usando esto. Un código como

$(document).ready(function() { 
    // any code goes here 
    init(); 
});

hizo todo lo que queríamos y nos preocupamos por las incompatibilidades del navegador por sí mismo.

Fuente

2011-02-24 09:07:53

También hay una forma algo más simple de '$ (function() {init();}); 'disponible. –

+10

aún más simple sería '$ (INIT);' –

body.addEventListener("load", init(), false);

That init() está diciendo ejecutar ahora esta función y asignar lo que devuelve al evento de carga.

Lo que quiere es asignar la referencia a la función, no el resultado. Entonces debes soltar el().

body.addEventListener("load", init, false);

también debería utilizar window.onload y no body.onload

addEventListener está soportado en la mayoría de los navegadores except IE 8.

Fuente

2011-02-22 18:26:40 epascarello

Para IE sería 'attachEvent'. quirksmode.org describe muy bien: http://quirksmode.org/js/events_advanced.html –

Seguro que es amigable ahora – WebWanderer

Simplemente ajustar el código que desea ejecutar en el proceso de carga del objeto de la ventana:

window.onload = function(){ 
    // your code here 
}

Fuente

2011-02-22 18:27:17 Moses

+12

Hay 2 posibles problemas con este enfoque. 1) Sobreescribes cualquier otro evento de carga que haya sido adjuntado, y 2) la descarga ya se haya activado dependiendo de dónde coloques este código, y como resultado nunca se puede disparar – Matt

Como @epascarello mencionado para los navegadores estándar del W3C, se debe utilizar:

body.addEventListener("load", init, false);

Sin embargo, si usted quiere que funcione en IE < 9, así que puede utilizar:

var prefix = window.addEventListener ? "" : "on"; 
var eventName = window.addEventListener ? "addEventListener" : "attachEvent"; 
document.body[eventName](prefix + "load", init, false);

O si lo quiere en una sola línea:

document.body[window.addEventListener ? 'addEventListener' : 'attachEvent'](
    window.addEventListener ? "load" : "onload", init, false);

Nota: aquí obtengo una referencia directa a el elemento del cuerpo a través del documento, lo que ahorra la necesidad de la primera línea.

Además, si está utilizando jQuery, y desea utilizar el evento DOM ready en lugar de cuando el cuerpo load s, la respuesta puede ser aún más corta ...

$(init);

Fuente

2012-12-12 11:47:04

Debe utilizar realmente el siguiente lugar (funciona en todos los navegadores más recientes):

window.addEventListener('DOMContentLoaded', init, false);

Fuente

2014-06-15 17:02:36

http://caniuse.com/#search=DOMContentLoaded – camou

¿Por qué no funciona? 'Document.addEventListener ('carga', init, false);' – Luke

@Luke que debe unir ese evento a la ventana como tal: window.addEventListener '('carga', init, false);' –

Añadir controlador de eventos para body.onload por javascript dentro de <body> parte

Respuesta

Cuestiones relacionadas