Eviter le conflit des window.onload en JavaScript

Rubrique Développement Web

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.

Publié il y a déjà trop longtemps…

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 !

Article rédigé par Samuel Le Morvan.

Ce que nos lecteurs en disent :

Domi

Tout simplement excellent.
Merci
guiguik

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

Mais on peut aussi faire ça :

// Execution des scripts au chargement de la page
window.onload = function() {
f1();
f2();
}
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!
artotal

Merci Julien cette façon est commode et je l’adopte, il y a aussi :
simonwillison.net/2004/Ma…
En naturglish
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
Jcc13

Merci Julien, je recherchais une façon propre et claire de charger plusieurs fonctions, c’est parfait !
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.
Raphaël

Exactement ce qu’il me fallait ! Merci :D
Julien

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

Bien pratique, et l’astuce de julien est hyper simple d’emploi.
Merci à tous !!
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.
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 :)
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);
}

;)
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 !!!!!
Philip

Génial comme tuto !!

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

Merci

Les commentaires sont clos.