Babylon Design

par Samuel Le Morvan

Chez vous aussi, utilisez un Web de qualité

Rubrique Développement Web

Profitez des astuces en tous genres portant sur le développement en général !

Rubrique Développement Web

Eviter le conflit des window.onload en JavaScript

Tout l’art du Javascript bien codé passe par le fait qu’il ne soit pas trop intrusif dans une page HTML. Cependant, il arrive qu’un script bloque un autre si vous utilisez plusieurs scripts d’origines différentes. Voici un petit moyen de résoudre cela.

A juste titre, de nombreux Javascripts s’enclenchent à la fin du chargement de la page via un window.onload. Ce qui est beaucoup plus propre que d’insérer dans son code HTML : <body onload="[…]">.

Or, si deux scripts différents désirent s’enclencher à la fin du chargement de la page via un window.onload, seul le dernier script déclaré s’enclenchera. En effet, le window.onload ne peut prendre qu’une seule valeur et chaque nouvelle déclaration écrase la précédente.

Exemple avec ce petit Javascript. La page n’affichera qu’une seule alerte qui aura pour texte "Fonction n°2".


// 1ère fonction
function f1() {
	alert('Fonction n°1');
	}
window.onload = f1;
// 2ème fonction
function f2() {
	alert('Fonction n°2');
	}
window.onload = f2; 

Pour remédier à cela, voici une petite fonction bricolée qui va stocker toutes les fonctions s’enclenchant à la fin du chargement de la page pour finalement les executer une par une.


// Fonction de stockage des scripts à charger FuncOL = new Array();
function StkFunc(Obj) {
	FuncOL[FuncOL.length] = Obj;
}
// Execution des scripts au chargement de la page window.onload =
function() {
	for(i=0; i<FuncOL.length; i++)
		{FuncOL[i]();}
}

Ainsi, il suffit de remplacer toutes les fonctions window.onload par la fonction StkFunc() et ce code se chargera d’executer les scripts l’un après l’autre.

Exemple : window.onload = MaFonction devient StkFunc(MaFonction).

De ce fait, mon petit exemple de script devient fonctionnel en affichant successivement « Fonction n°1″ puis « Fonction n°2″.


// 1ère fonction
function f1() {
	alert('Fonction n°1');
	}
StkFunc(f1);
// 2ème fonction
function f2() {
	alert('Fonction n°2');
	}
StkFunc(f2); 

Il doit être possible, de gérer ce problème encore plus proprement avec la fonction native addEventListener, mais je connais encore assez mal cette fonction. A charge de revanche !


Ce que nos lecteurs en disent :

  1. Domi

    Tout simplement excellent.
    Merci

  2. guiguik

    UN GRAND MERCI !
    ton ptit bout de code me sauve la vie !

  3. Julien

    Mais on peut aussi faire ça :

    // Execution des scripts au chargement de la page
    window.onload = function() {
    f1();
    f2();
    }

  4. PodeniaK

    Merci! C’est con mais c’est quand meme dur d’avoir ce genre d’information malgré le nombre de tuto varié en js!

  5. artotal

    Merci Julien cette façon est commode et je l’adopte, il y a aussi :
    simonwillison.net/2004/Ma…
    En naturglish

  6. billboc

    et quelle est la solution pour qu’un script qui doit afficher un popup soit actif avant la fin du chargement de la page ? merci pour votre aide

  7. Jcc13

    Merci Julien, je recherchais une façon propre et claire de charger plusieurs fonctions, c’est parfait !

  8. Patrick

    Merci trop bien pour cette piste bien pertinente mais peut-être serait-il judicieux, pour l’utilisateurs de GoLive (notamment) qui pourrait être amené à rencontrer ce problème avec des actionscripts particulièrement alambiqués proposés et devant cohabiter avec quelques fonctions onload plus perso ou butinés ailleurs, d’utiliser l’item "Associer des actions" sur une action d’en-tête pour rentrer tout ce petit monde bien proprement dans cette logique de regroupement. ça peut éviter l’urticaire du sujet pas forcément copain avec le JS.

  9. Raphaël

    Exactement ce qu’il me fallait ! Merci :D

  10. Julien

    Merci !!! C’est grandiose… Vive le js ! : )

  11. alex @ sarbazan

    Bien pratique, et l’astuce de julien est hyper simple d’emploi.
    Merci à tous !!

  12. MarMotix

    Juste pour signaler que ce soucis n’apparait pas sur Opera (version 9.27).
    Un peu de pub pour un navigateur qui le mérite.

  13. Druss

    Ce problème arrive notamment sous IE (toutes versions confondues, même la 7), car c’est une véritable daube.

    Si vous utilisez prototype.js, vous pouvez passer par : Event.observe(window, ‘load’, votre_fonction, false);

    Et merci pour l’article :)

  14. Raphaël

    Je suis de retour ! Voici la version avec le addEventListener :

    function lancer(fct) {
    if (window.addEventListener)
    window.addEventListener(‘load’, fct, false);
    else
    window.attachEvent(‘onload’, fct);
    }

    ;)

  15. olivier

    Alors là … ça fait deux jours que je planche sur ce satané conflit !!!!!

    Et votre script, non seulement fonctionne à merveille, mais en plus, me remonte le moral et m’autorise une pause détente ….

    MERCI !!!!!

  16. Philip

    Génial comme tuto !!

    Très bien expliquer en plus… ce qui est rare sur le web!!

    Merci

Les commentaires sont clos.