2010-02-16 12 views
9

Recientemente me encontré con el siguiente problema:¿Hay + = para window.onload en Javascript?

En mi sitio web en todas las páginas HTML que llama a una función en el evento onLoad cuerpo:

<body onLoad="func1();"> 

Esto es parte de mi plantilla de HTML, por lo que aparece en cada página de mi sitio y no puedo cambiar eso. Ahora, el trato es que en algunas páginas, necesito llamar a otras funciones en onload y lo intenté con la propiedad window.onload, pero borra la llamada de func1 ...

Ahora que puedo decir:

window.onload = func2(); //where func2() calls to func1() 

pero esto parece sucio y cojo? ¿No es así?

Entonces, ¿hay alguna forma de agregar algunas funciones a las que están a punto de ejecutarse onload, sin eliminar la anterior? Además uso asp.net si eso pudiera ayudar ...

¡Gracias!

+0

Lo que veo en las respuestas es que jquery es probablemente lo mejor que podemos obtener. O podemos ir por algunos trucos sucios y pirateos. – anthares

+2

No creo que el método de "funciones anónimas" sea "un truco sucio". De hecho, está bastante limpio ... y usa una de las funciones más poderosas de JavaScript. –

+0

Estoy de acuerdo, es una buena alternativa, también. – anthares

Respuesta

19

Puede usar jQuery para encadenar controladores de carga. Repetidamente usando jQuery.load o jQuery(document).ready encadenará sus manipuladores (creo). Su otra opción es hacerlo de forma programática, lo que significa que necesita una función auxiliar que encadene sus manejadores de carga por usted. Usted puede hacer esto con un cierre (o función anónima):

var addOnLoadHandler = function(newHandler) { 

    if (typeof window.onload != 'function') { 
     window.onload = newHandler; 
    } 

    else { 
     var oldHandler = window.onload; 
     window.onload = function() { 
      if (oldHandler) { 
       oldHandler(); 
      } 
      newHandler(); 
     }; 
    } 
}; 

Usted tendrá que unir sus funciones mediante programación, sin embargo, por lo que tendría que hacer:

addOnLoadHandlers(function() { 
alert("Hi I am the first onLoad handler!"); 
}); 

addOnLoadHandlers(function() { 
alert("Hi I am the second onLoad handler!"); 
}); 

en un archivo JavaScript (o en tu archivo html).

Otro enfoque es el uso de una matriz:

var onloaders = new Array(); 

function runOnLoads() { 
    for (i = 0; i < onloaders.length; i++) { 
     try { 
      var handler = onloaders[i]; 
      handler(); 
     } catch(error) { 
      alert(error.message); 
     } 
    } 
} 

function addLoader(obj) { 
    onloaders[onloaders.length] = obj; 
} 

En su archivo HTML o Javascript que hace:

addLoader(function() { 
alert("Hi I am the first onLoad handler!"); 
}); 

addLoader(function() { 
alert("Hi I am the second onLoad handler!"); 
}); 

Luego, en su html que sólo puede hacer <body onload="runOnLoads()">

3

¿ha considerado una biblioteca de Javascript como jQuery, sé que hay otros enfoques, pero jQuery le hará la vida mucho más fácil ...

$(function(){ 
    //Do stuff when DOM is loaded. 
    func1(); 
    $('#link').click(function(){ 
     //bind a click event 
    }); 
}); 

El enfoque clásico es que sólo se adhieren a todas sus funciones en la parte inferior de la página :)

+0

OK, pero algunas de las funciones que quiero que se llamen en cada página y algunas solo en algunas páginas específicas. Y cuando digo "en cada página", quiero escribirlo en un solo lugar. ¿Cómo me va a ayudar jquery? – anthares

+0

¿Qué pasa si él no quiere usar jQuery? @anthares, si desea que algunas funciones se llamen solo en páginas específicas, necesita javascript en aquellas páginas que agregarán los controladores de carga específicos que necesita. –

+0

@anthares, bueno, como dices asp.net, ¿estás usando una página maestra? Si es así, pero los generales, si no, entonces supongo que debe ajustar una función sobre las comunes y llamarla en cada página. JQuery simplemente hace todo más fácil y terser. –

5

Es posible que desee hacer el mejor fuera de funciones anónimas:

function addLoadEvent(func) { 
    var oldonload = window.onload; 
    if (typeof window.onload != 'function') { 
     window.onload = func; 
    } 
    else { 
     window.onload = function() { 
      oldonload(); 
      func(); 
     } 
    } 
} 

tomado de la Top 10 custom JavaScript functions of all time.

3

En jQuery usted puede hacer

$(document).onload(function() { 
    // do something 
} 

// luego más tarde hacer

$(document).onload(function() { 
    // do something here too! 
} 

jQuery añadirá de forma inteligente los dos eventos para el proceso de carga y ambos se ejecutará cuando se carga la página. Con jQuery también obtienes soporte de navegador cruzado como una ventaja adicional.

5

jQuery tiene una buena abreviatura para agregar múltiples manejadores definidos al evento "listo" (no funciona con funciones anónimas donde tiene que usar $ (document) .ready (function() {});).

simplemente

$(myFunction); 
$(myFunction2); 

Una gran ventaja es que si el DOM ya se ha cargado, esto todavía es despedido, mientras que todo lo que ates a window.onload después de que el evento no será llamado.

Cuestiones relacionadas