Práctica recomendada para usar window.onload

Question

Desarrollo de sitios web/componentes/módulos y complementos de Joomla y de vez en cuando necesito la capacidad de utilizar JavaScript para desencadenar un evento cuando se carga la página. La mayoría de las veces esto se hace usando la función window.onload.

Mi pregunta es:

1. ¿Es esta la mejor manera de desencadenar los eventos de JavaScript en la página de carga o hay una manera mejor/más reciente?
2. Si esta es la única forma de desencadenar un evento en la carga de la página, ¿cuál es la mejor manera de asegurarse de que varios scripts ejecuten varios eventos?

Answer 1

window.onload = function(){}; funciona, pero como te habrás dado cuenta, que le permite especificar sólo el 1 oyente.

yo diría que la más nueva manera mejor/de hacer esto sería utilizar un marco, o simplemente utilizar una implementación sencilla de la nativa addEventListener y attachEvent (IE) de métodos, que le permite eliminar los oyentes por los eventos también.

Aquí hay una aplicación multi-navegador:

// Cross-browser implementation of element.addEventListener() 
function listen(evnt, elem, func) { 
    if (elem.addEventListener) // W3C DOM 
     elem.addEventListener(evnt,func,false); 
    else if (elem.attachEvent) { // IE DOM 
     var r = elem.attachEvent("on"+evnt, func); 
     return r; 
    } 
    else window.alert('I\'m sorry Dave, I\'m afraid I can\'t do that.'); 
} 

// Use: listen("event name", elem, func); 

Para el caso de uso window.onload: listen("load", window, function() { });

---

EDITAR me gustaría ampliar mi respuesta mediante la adición valiosa información que fue señalado por otros.

Esto es sobre el DOMContentLoaded (nocturnos de Mozilla, Opera y webkit apoyo que actualmente este) y el onreadystatechange (para IE) eventos que se pueden aplicar al documento objeto de entender cuando el documento es disponible para ser manipulado (sin esperar a que se carguen todas las imágenes/hojas de estilo, etc.).

Hay una gran cantidad de implementaciones "hacky" para el soporte de navegadores cruzados de este, por lo que sugiero utilizar un marco para esta característica.

Answer 2

Los marcos de JavaScript modernos han introducido la idea de un evento "listo para documentos". Este es un evento que se activará cuando el documento esté listo para realizar las manipulaciones de DOM en él. El evento "onload" se activa solo después de que se haya cargado TODO en la página.

Junto con el evento "documento listo", los marcos han proporcionado una forma de poner en cola múltiples bits de código JavaScript y funciones para ejecutar cuando el evento se dispara.

Por lo tanto, si se opone a los marcos, la mejor manera de hacerlo es implementar su propia cola document.onload.

Si usted no está opone a los marcos, entonces usted tendrá que buscar en jQuery and document.ready, Prototype and dom:loaded, Dojo and addOnLoad o Google para [el marco] y "documento listo" ,.

Si no ha elegido un marco, pero está interesado, jQuery es un buen lugar para comenzar. No cambia ninguna de las funciones básicas de Javascript, y generalmente se mantendrá fuera de su camino y le permitirá hacer las cosas que desee cuando lo desee.

Answer 3

Personalmente, prefiero this method. No solo le permite tener múltiples funciones onload, pero si alguna secuencia de comandos lo ha definido antes de, este método es lo suficientemente bueno para manejarlo ... El único problema que queda es si una página carga varias secuencias de comandos que no usa la función window.addLoad(); pero ese es su problema :).

P.S. También es genial si quieres "encadenar" más funciones más adelante.

Answer 4

Joomla se envía con MooTools, por lo que le resultará más fácil usar la biblioteca MooTools para su código adicional. MooTools se envía con un evento personalizado llamado domready que se activa cuando se carga la página y se analiza el árbol de documentos.

window.addEvent(domready, function() { code to execute on load here }); 

Más información sobre MooTools se puede encontrar here. Joomla 1.5 actualmente se envía con MT1.1, mientras que el Joomla 1.6 alpha incluirá MT1.2

Answer 5

Los eventos window.onload se anulan en varias creaciones. Para agregar funciones, use window.addEventListener (estándar W3C) o window.attachEvent (para IE). Usa el siguiente código que funcionó.

if (window.addEventListener) // W3C standard 
{ 
    window.addEventListener('load', myFunction, false); // NB **not** 'onload' 
} 
else if (window.attachEvent) // Microsoft 
{ 
    window.attachEvent('onload', myFunction); 
} 

Answer 6

Ésta es la manera sucia, pero más corto: P

function load(){ 
    *code* 
} 

window[ addEventListener ? 'addEventListener' : 'attachEvent' ] 
(addEventListener ? 'load' : 'onload', function(){}) 

Answer 7

A partir de Siempre incluyo jQuery/arranque de archivos JS en la parte inferior del documento y no tienen acceso a $ sobre el documento, he desarrollado una pequeño plug-in "init", que es uno y sólo escritura JS incluyo en la parte superior de mis páginas:

window.init = new function() { 
    var list = []; 

    this.push = function(callback) { 
     if (typeof window.jQuery !== "undefined") { 
      callback(); 
     } else { 
      list.push(callback); 
     } 
    }; 

    this.run = function() { 

     if (typeof window.jQuery !== "undefined") { 
      for(var i in list) { 
       try { 
        list[i](); 
       } catch (ex) { 
        console.error(ex); 
       } 
      } 
      list = []; 
     } 
    }; 

    if (window.addEventListener) { 
     window.addEventListener("load", this.run, false); 
    } else if (window.attachEvent) { 
     window.attachEvent("onload", this.run); 
    } else { 
     if (window.onload && window.onload !== this.run) { 
      this.push(window.onload); 
     } 
     window.onload = this.run; 
    } 
}; 

el uso de este puedo definir cualquier cargador anónima sobre la página, antes de jQuery una d arrancar la inclusión y estar seguro de que va a disparar una vez jQuery está presente:

init.push(function() { 

    $('[name="date"]').datepicker({ 
     endDate: '0d', 
     format: 'yyyy-mm-dd', 
     autoclose: true 
    }).on('hide', function() { 
     // $.ajax 
    }); 

    $('[name="keyword_id"]').select2(); 
});