javascript - incluir - php articulo joomla

La mejor práctica para usar window.onload

Question

Desarrollo sitios web / componentes / módulos y complementos de Joomla y de vez en cuando necesito la capacidad de usar JavaScript que desencadena 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 eventos de JavaScript en la carga de la página o hay una forma mejor / más nueva?
2. Si esta es la única manera de desencadenar un evento en la carga de la página, ¿cuál es la mejor manera de asegurarse de que múltiples eventos puedan ser ejecutados por diferentes scripts?

Answer 1

A partir de siempre incluyo los archivos JQuery / bootstrap JS en la parte inferior del documento y no tengo acceso a $ sobre el documento, desarrollé un pequeño complemento "init" que es uno y solo el script JS que 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;
}
};

Usando esto, puedo definir cualquier cargador anónimo sobre la página, antes de incluir jQuery y bootstrap, y estar seguro de que se activará una vez que 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();
});

Answer 2

Esta es la manera sucia pero más corta: P

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

Answer 3

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 } );

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

Answer 4

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 5

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 "listo para documentos", 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 de documentos en espera.

Si no se opone a los marcos, entonces le conviene examinar jQuery y document.ready , Prototype y dom: loaded , Dojo y addOnLoad o Google para [su framework] y "document ready".

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 6

Personalmente, prefiero este método . No solo le permite tener múltiples funciones de onload , pero si algún script lo definió antes de llegar a él, este método es lo suficientemente bueno para manejarlo ... El único problema que queda es si una página carga varios guiones que no lo hacen use la función window.addLoad() ; pero ese es su problema :).

PD: también es genial si quieres "encadenar" más funciones más adelante.

Answer 7

window.onload = function(){}; funciona, pero como habrás notado, te permite especificar solo 1 oyente .

Diría que la forma mejor / más nueva de hacer esto sería usar un marco, o simplemente usar una implementación simple de los métodos nativos addEventListener y attachEvent (para IE), lo que le permite eliminar los oyentes para los eventos como bien.

Aquí hay una implementación entre navegadores:

// 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 uso de window.onload case: listen("load", window, function() { });

EDITAR Me gustaría ampliar mi respuesta agregando información valiosa que otros apuntaron.

Se trata de DOMContentLoaded (Mozilla, Opera y webkit nightlies lo admiten actualmente) y los onreadystatechange (para IE) que se pueden aplicar al objeto del documento para comprender cuándo el documento está disponible para ser manipulado (sin esperar todas las imágenes / hojas de estilo, etc. a cargar).

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