Ajouter plusieurs événements window.onload

Question

Dans mon contrôle d'utilisateur ASP.NET, j'ajoute un peu de JavaScript à la balise window.onload événement :

if (!Page.ClientScript.IsStartupScriptRegistered(this.GetType(), onloadScriptName))
  Page.ClientScript.RegisterStartupScript(this.GetType(), onloadScriptName, 
    "window.onload = function() {myFunction();};", true);            

Mon problème est que, s'il y a déjà quelque chose dans la onload que cela l'écrase. Comment faire pour permettre à deux contrôles d'utilisateur d'exécuter chacun du JavaScript dans l'événement de l'utilisateur ? onload événement ?

Edit : Merci pour les informations sur les bibliothèques tierces. Je vais les garder à l'esprit.

Answer 1

La plupart des "solutions" proposées sont spécifiques à Microsoft, ou nécessitent des bibliothèques hypertrophiées. Voici une bonne solution. Elle fonctionne avec les navigateurs conformes au W3C et avec Microsoft IE.

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

Answer 2

Il existe toujours une solution peu élégante (qui est bien inférieure à l'utilisation d'un cadre ou d'un système de gestion de la qualité). addEventListener / attachEvent ) qui consiste à sauvegarder l'actuel onload événement :

function addOnLoad(fn)
{ 
   var old = window.onload;
   window.onload = function()
   {
       old();
       fn();
   };
}

addOnLoad(function()
{
   // your code here
});
addOnLoad(function()
{
   // your code here
});
addOnLoad(function()
{
   // your code here
});

Notez que des frameworks comme jQuery fourniront un moyen d'exécuter du code lorsque le DOM est prêt et non lorsque la page se charge.

Le fait que le DOM soit prêt signifie que votre HTML a été chargé, mais pas les composants externes tels que les images ou les feuilles de style, ce qui vous permet d'être appelé bien avant le déclenchement de l'événement de chargement.

Answer 3

J'ai eu un problème similaire aujourd'hui et je l'ai résolu en faisant une demande d'accès à l'Internet. index.js avec les éléments suivants :

window.onloadFuncs = [];

window.onload = function()
{
 for(var i in this.onloadFuncs)
 {
  this.onloadFuncs[i]();
 }
}

et dans les fichiers js supplémentaires où je veux attacher l'événement onload, je dois juste faire ceci :

window.onloadFuncs.push(function(){
 // code here
});

J'utilise normalement jQuery, mais cette fois, j'ai été limité à du js pur, ce qui m'a obligé à utiliser mon esprit pendant un certain temps !

Answer 4

Mootools est un autre excellent cadre JavaScript qui est assez facile à utiliser, et comme RedWolves l'a dit avec jQuery tu peux juste continuer à balancer autant de handlers que tu veux.

Pour chaque fichier *.js que j'inclus, j'enveloppe le code dans une fonction.

window.addEvent('domready', function(){
    alert('Just put all your code here');
});

Et il y a aussi avantages de l'utilisation de domready au lieu de onload

Answer 5

Avez-vous envisagé d'utiliser quelque chose comme JQuery qui fournit un cadre pour le nettoyage en ajoutant plusieurs gestionnaires d'événements ?