Archives du blog

Surcharge de fonction javascript

Je suis actuellement sur une problématique de migration d’une application web de IE 8 (enfin plutôt IE5 😉 ) vers IE11.
L’un des problèmes rencontrés est une mauvaise façon de faire dans l’application. Il y a eu confusion entre l’attribut className javascript et la propriété « class » HTML.

Sous IE8 il y avait la possibilité de modifier la classe d’un objet HTML en faisant un .setAttribute(« className », « nouvelle classe »), or cela ne fonctionne plus en IE11 (même en activant le mode de compatibilité).

Plutot que de modifier le code dans tous les fichiers (près de 200 pages touchées, le copier coller quand c’est mal fait c’est mal fait 😉 ), je suis parti sur une approche de surcharge de la fonction javascript setAttribute().
Je sauvegarde les pointeurs vers les fonctions de base pour les appeler dans le cas « normal »

Voici une page exemple contenant le

<html>
<body>
<style>
.style1{ background-color:#00FFFF; }
.style2{ background-color:#FF0000; }
</style>

<div id="div1" class="style1"> Div 1 </div>
<div id="div2" class="style2"> Div 2 </div>

<script>
function setAttribute( element, valeur ) {
    if ( element == "className" )
    { this.className = valeur; }
    else
    { this._setAttribute( element, valeur ); }
}

function getAttribute( element ) {
    if ( element == "className" )
    { return this.className ; }
    else
    { return this._getAttribute( element ); }
}

try {
	HTMLElement.prototype._setAttribute = HTMLElement.prototype.setAttribute; 
	HTMLElement.prototype.setAttribute = setAttribute; 
	HTMLElement.prototype._getAttribute = HTMLElement.prototype.getAttribute; 
	HTMLElement.prototype.getAttribute = getAttribute; 
}
catch( err ) { }
</script>

<script>
document.getElementById( "div1" ).setAttribute("className" ,"style2");
alert( document.getElementById( "div1" ).getAttribute( "className" ));
</script>
</body>
</html>

Si vous supprimez les lignes du bloc try le code ne devrait plus fonctionner dans IE11.