11523 sujets

JavaScript, DOM et API Web HTML5

Commentaires conditionnels JavaScript pour IE

Hello,

Je fais quelques recherches et tests sur la Conditional Compilation en JavaScript dans Internet Explorer (ou plutôt en JScript...).
On trouve une documentation assez brève avec peu d'exemples chez Microsoft:
http://msdn.microsoft.com/en-us/library/ahx1z4fs%28VS.80%29.aspx
et je n'ai pas vraiment trouvé mieux ailleurs.

Après avoir passer une heure ou plus à trouver une syntaxe qui fonctionne (faut-il un @end comme dans les exemple ou pas, un @ à la fin du commentaire, etc.), j'ai pu faire les tests que je voulais. En l'occurrence je voulais savoir si la valeur de @_jscript_version, une variable accessible dans IE une fois la compilation conditionnelle activée, permettait de retrouver la version d'IE. En gros, je cherche un mécanisme équivalent aux commentaires conditionnels HTML mais côté JavaScript, et j'essaie de savoir si la fiabilité est la même.

Voici mon code de test:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf8">
<title>Some test</title>
</head>
<body>

<script>
var message, jscript_version = undefined;

/*@cc_on jscript_version = @_jscript_version; @*/

switch(jscript_version) {
  case 9: message = 'Looks like IE9 Preview or something.'; break;
  case 5.8: message = 'Looks like IE8.'; break;
  case 5.7: message = 'Looks like IE7.'; break;
  case 5.6: message = 'Looks like IE6.'; break;
  case undefined: message = 'Doesn’t look like IE at all.'; break;
  default: message = 'Looks like IE, but not a version from 6 to 9.';
}
var htmlm = '<p>@_jscript_version = '+jscript_version+'</p>';
htmlm += '<p>'+message+'</p>'
document.write(htmlm);
</script>

</body>
</html>

En testant sous Windows 7, j'ai obtenu les résultats suivants pour la valeur de @_jscript_version:
- Win7, IE8 natif = 5.8
- Win7, IE Platform Preview 1.9.7745.6019 = 9
- Win7, IETester 0.4.2 / IE8 = 5.8
- Win7, IETester 0.4.2 / IE7 = 5.7
- Win7, IETester 0.4.2 / IE6 = 5.6
- Win7, IETester 0.4.2 / IE5.5 = 5.6 (on attendrait 5.5 d'après Wikipedia)
- Win98, IE6 natif = 5.6

Le résultat obtenu pour la preview d'IE9 est un peu surprenant, mais vu que JScript 7 et 8 existent déjà (côté serveur, avec .NET), il y a une certaine logique.

J'aimerais savoir ce que vous obtenez sur d'autres plateformes, avec des IE6 et 7 natifs notamment. Si quelqu'un a un IE 5.5 natif, pour le fun...
Laurie-Anne a écrit :
Je suis sous un IE6 natif WinXP sp3, j'obtiens 5.7 !

Cette info était notée sur l'article Wikipedia, mais la référence donnée ne le confirmait pas.
Microsoft aurait mis à jour le moteur JScript d'IE avec Windows XP SP3 (peut-être pour des raisons de sécurité?). Ce qui signifie aussi que pour tester une application JavaScript qui supporte encore IE6, il faudrait tester sur Windows XP SP3 et sur Windows 2000 par exemple. Woohoo.
JScript 5.8 (IE8) serait aussi la version utilisée par IE6 sur Windows Mobile 6.5, mais ça a moins de conséquences.
Laurie-Anne a écrit :
Wé du coup c'est pas hyper fiable comme solution... Domage.

Sauf à doubler par une détection du UserAgent. Pas fiable en principe, mais détecter "MSIE 6.0" plutôt que juste "msie", et doubler avec la détection de @_jscript_version (qui permet d'être sûr qu'on a affaire à IE) réduit largement les risques.
Code corrigé, avec ajout de classes sur l'élément html et prise en compte de IE6 sur WinXP SP3:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf8">
<title>IE version detection with JavaScript conditional compilation</title>
</head>
<body>

<script>
var jscriptVersion, ieClass;
/*@cc_on jscriptVersion = @_jscript_version; @*/
if (jscriptVersion) {
  ieClass = 'IE';
  if (jscriptVersion==9) ieClass = 'IE IE9';
  if (jscriptVersion==5.8) ieClass = 'IE IE8';
  if (jscriptVersion==5.7) ieClass = 'IE IE7';
  if (jscriptVersion==5.6) ieClass = 'IE IE6';
  // IE6 on WinXP SP3 has JScript 1.7
  if (jscriptVersion==5.7 && navigator.userAgent.indexOf('MSIE 6.0') != -1) ieClass = 'IE IE6';
  document.documentElement.className += ' '+ieClass;
}

var htmlm = '<p>@_jscript_version = '+jscriptVersion+'</p>';
htmlm += '<p>document.documentElement.className = '+ieClass+'</p>';
document.write(htmlm);
</script>

</body>
</html>

Modifié par Florent V. (15 Sep 2010 - 18:30)
Yop ! ça fonctionne Smiley smile

Par contre il manque un ";" à la fin de : 
htmlm += '<p>document.documentElement.className = '+ieClass+'</p>'
Sujet clos
Aller à