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.

Publicités

Publié le 16 juin 2014, dans Non Trié, et tagué . Bookmarquez ce permalien. Poster un commentaire.

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

%d blogueurs aiment cette page :