Section : La navigation et le navigateur
[QR] Comment détecter Internet Explorer grace aux commentaires conditionnels ?

JavaScript n'est pas implémenté de la même façon selon les navigateurs.
En particulier, il est souvent nécessaire d'adapter son code en fonction de celui-ci.
En règle générale, il s'agit surtout d'Internet Explorer qu'il est important de détecter.
De nombreuses méthodes existent déjà. Celle que je vais vous présenter à l'avantage de pouvoir être évolutive dans le temps.
En effet, habituellement, on teste le navigateur en fonction de l'existence de telle ou telle fonctionnalité (souvent document.all). En revanche, que se passe-t-il si une mise à jour du navigateur ne permet plus cette distinction.

L'astuce est d'utiliser les commentaires conditionnels (souvent utilisés en CSS) et d'implémenter une variable dedans :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html 
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>IE sniffer</title>
<script type="text/javascript">
var IE = false;
var IE6 = false;
var IE7 = false;
var IEAutre = false;
window.onload = function(){
        var texte = "Vous utilisez Internet Explorer : ";
        texte += reponse(IE);
        texte += "\nVous utilisez Internet Explorer 6 : ";
        texte += reponse(IE6);
        texte += "\nVous utilisez Internet Explorer 7 : ";
        texte += reponse(IE7);
        texte += "\nVous utilisez une autre version de Internet Explorer : ";
        texte += reponse(IEAutre);
        document.getElementById('affichage').innerHTML = texte;
}
function reponse(variable){
return(variable?'oui':'non');
}
</script>
<!--[if IE]>
<script type="text/javascript">
var IE = true;
var IEAutre = true;
</script>
<![endif]-->
<!--[if IE 6]>
<script type="text/javascript">
var IE6 = true;
var IEAutre = false;
</script>
<![endif]-->
<!--[if IE 7]>
<script type="text/javascript">
var IE7 = true;
var IEAutre = false;
</script>
<![endif]-->
</head>
<body>
	<div id="affichage"></div>
</body>
</html>

Une autre méthode, plus générale, est déjà présente dans la FAQ JavaScript