La forma correcta de usar window.onload
En ocasiones, necesitamos ejecutar funciones javascript al cargarse una página (validaciones, autocompletados…).
Lo típico es hacerlo en el evento onload del body o poniendo las llamadas a nuestras funciones javascript dentro del código para que se vayan ejecutando mientras se carga la página, ésta sería la forma intrusiva de hacerlo, la forma no intrusiva sería utilizar window.onload.
window.onload = mifuncion();
Hay un problema que fácilmente nos puede surgir, cuando tenemos varias asignaciones a window.onload, ya que se ejecutará sólo la última.
En un principio se me ocurrió solucionarlo con una asignación común para toda la web, el problema es evidente, para una web más o menos grande llegaría a ser una macro-función, además de ser una solución nada elegante.
Al final a googleando un poco, acabé encontrando la solución en el blog de Robert Hahn, donde plantea tres formas de hacerlo para “que funcione”, y una solución que al parecer es la ideal, simplemente es asignar a window.onload ésta función que nos devuelve una función anónima:
function makeDoubleDelegate(function1, function2) {
return function() {
if (function1)
function1();
if (function2)
function2();
}
}
Para probarlo simplemente con éste código, podemos ver que funcina correctamente:
window.onload = makeDoubleDelegate(window.onload, alert('1')); window.onload = makeDoubleDelegate(window.onload, alert('2')); window.onload = makeDoubleDelegate(window.onload, alert('3'));
November 20th, 2007 at 2:30 pm
Otra solución que también da bastante buen resultado es usar alguna librería como mootools o jQuery, que generalmente incluyen un sistema para controlar este tipo de eventos bastante bien.
November 20th, 2007 at 4:55 pm
Hola Francisco,
Ésto sería si no se utiliza alguna de las librerías que incluyen el sistema para manejar eventos.
Si trabajas con alguna de ellas, está claro, mejor hacerlo a su manera ¿para qué rehacer trabajo?
November 20th, 2007 at 7:32 pm
Me interesa mucho esto, por que yo tengo un problema con dos script que cargan html en un div y como usa window.onload= function()pues eso que solo se ve uno, el problema es que no tengo ni idea de ajax ni de javaScript y no se que tengo que hacer con la solución que das. gracias
November 20th, 2007 at 7:55 pm
Hola.
La forma que comentas en el post es muy elegante.
Hace unas semanas publique en Variable Not Found dos entradas que muestran otras formas de hacerlo:
Incluir scripts de arranque en webs
Añadir funciones con parámetros
Saludos y felicidades por el blog.
November 20th, 2007 at 9:44 pm
Hola Jaime,
Si tienes dos window.onload=function(), cámbialo por dos funciones normales con nombre: function mifuncion1(){…
Escribe la función makeDoubleDelegate y luego úsala así:
window.onload = makeDoubleDelegate(window.onload,mifuncion1);
window.onload = makeDoubleDelegate(window.onload,mifuncion2);
Si las funciones están bien escritas te debería funcionar.
November 21st, 2007 at 12:34 am
La forma correcta de usar window.onload…
Cómo se debe utilizar window.onload correctamente, sin librerías javascript….
November 21st, 2007 at 1:23 am
Hola José M.
Veo que con la función addOnLoad() también se soluciona el problema, y parece incluso más cómoda de utilizar.
Discúlpame por tardar en publicar tu comentario, ni me había dado cuenta que estaba por moderar.
Saludos!
November 21st, 2007 at 11:42 am
Perdoname pero no lo se hacer, ¿puedo poner aquí mi Script?
November 21st, 2007 at 12:26 pm
Hola Jaime,
te he mandado un correo.
January 17th, 2008 at 1:17 am
oye una pregunta quiero cargar varias paginas php en diferentes divs pero no funciona a que se debe
October 21st, 2008 at 3:42 am
Tu funcion no me funciono, y es cierto, la funcion addOnLoad() tambien soluciona el problema de cargar varias funciones a la vez y es mas comoda de usar.
Para quienes el interese la funcio addOnLoad() es esta:
function addLoadEvent(func){
var oldonload = window.onload;
if (typeof window.onload != ‘function’)
{
window.onload = func;
}else{
window.onload = function(){
if (oldonload)
{
oldonload();
}
func();
}
}
}
y se usa asi:
addLoadEvent(function(){
funcion1();
funcion2();
funcion3();
});
Otra cosa que tambien funcionaria rapidamente sin mucho script es crear una funcion y ponerle todas las funciones que se quiere ejecutar detro de ésta, y luego llamarla con window.onload y listo. No será super elegante pero funciona.
October 21st, 2008 at 12:00 pm
Hola aei,
Hombre… esa es la solución evidente, en alguna ocasión puedes no necesitar nada más, pero si estás haciendo algo más o menos grande es muy probable que resulte complicado de mantener.
Saludos!
July 28th, 2009 at 2:08 am
¡Gracias! ¡Gracias! ¡Gracias!