Trucsweb.com

DHTML

Introduction au HTML dynamique

RDFFav

Détection du DOM pour la compatibilité de vos codes DHTML - En attendant un standard international...

Le DOM ou « document object model » est particulier à chaque navigateur. Malgré que le W3C essai de persuader les concepteurs de navigateur d’utiliser son standard, soit le DOM-1 et le DOM-2, il existe encore plusieurs modèles selon les navigateurs, en particulier entre Internet Explorer et Netscape.détection dom sniffer compatibilité javascript dhtml object model navigateurs dom-1 dom-2 internet explorer netscape ns4 ns5 ns6 ie4 ie5 ie5.5 version document.all document.layers document.getElementById opera test compatible include detect.js

  • · Niveau : INTERMÉDIAIRE
  • · Compatibilité : IE 4+, NS 4+ et Netscape 6

Le DOM ou « document object model » est particulier à chaque navigateur. Malgré que le W3C essai de persuader les concepteurs de navigateur d’utiliser son standard, soit le DOM-1 et le DOM-2, il existe encore plusieurs modèles selon les navigateurs, en particulier entre Internet Explorer et Netscape. Cette problématique ne peut être surmontée que par une détection du DOM pour ensuite exécuter son code Javascript qui lui est propre.

Pour déterminer le DOM, il faut déterminer le type de navigateur et sa version. Pour ce faire il y a deux méthodes. Vous pouvez utiliser la méthode simple ou la méthode longue qui est fortement conseillée.

 

La méthode simple
La plupart des codes DHTML utilisent la détection d’objet pour être compatibles avec les différentes versions de DOM. La méthode consiste à exécuter un code si un objet particulier à un navigateur existe.

Par exemple, si l’objet "document.all" existe vous savez que le navigateur est IE4 + et vous pouvez utiliser tout le DOM de IE. Si c’est l’objet "document.layers" qui est détecté c’est Netscape 4.7 et moins qui est exécuté. Et finalement "document.getElementById" indique que c’est un code des recommandations DOM-1 de la W3C, donc Netscape 5 +, en d’autres mots, Netscape 6.

Exemple

if (document.getElementById) { 
  // Navigateur Netscape 5 + ou  et DOM-1.
} 
else if (document.layers) { 
  // Navigateur Netscape 4.7 et moins. 
} 
else if (document.all) { 
  // Internet Explorer 
}

 

Cette méthode grandement utilisée n’est pas fiable à 100%. En effet plusieurs navigateurs interprètent l’objet "document.all" mais aussi "document.layers". Le navigateur "Opera" par exemple interprète les trois objets. D’autres sont compatibles DOM-1 mais ne comprennent pas "document.getElementById". Cette technique n’est donc pas vraiment fiable, la seule chose que vous pouvez savoir à coup sûr c’est que le navigateur comprend l’objet en question.

Pour augmenter vos chances avec cette méthode, je vous conseil un test supplémentaire afin de localisé "Opera".

Exemple

var ns4=document.layers
var ie4=document.all
var ns6=document.getElementById&&!document.all
if (ns6) { 
  // Navigateur Netscape 5 et plus et DOM-1.
} 
else if (ns4) { 
  // Navigateur Netscape 4.7 et moins. 
} 
else if (ie4) { 
  // Internet Explorer et Opera
}

Cette technique initialise trois variables. L’une d’entre elles sera vraie alors que les deux autres faussent. Par exemple, si votre navigateur est Internet Explorer 5, ie4 sera vrai, donc " TRUE ". De cette manière, vous pouvez par la suite faire vos tests avec ces trois variables. Noter l’ajout de " &&!document.all " pour faire en sorte que le navigateur "Opera" forcera à " TRUE " la variable ie4.

 

La méthode longue
La meilleure méthode consiste à faire une véritable détection du navigateur et d’initialiser des variables pour faire ensuite vos tests. Ce test de compatibilité est mis à jour continuellement par Netscape, vous n’avez donc pas à le refaire.

Page du code de détection de Netscape (attention, cette page n’est pas toujours disponible avec IE !!!)
- The Ultimate JavaScript Client Sniffer, Version 3.0
- Télécharger le fichier INCLUDE qui définit les variables. detect.js

 

Exemple d’utilisation de " detect.js "

Ajouter ce code dans l’en-tête de votre document. (attention de bien indiquer le chemin d’accès " path " du fichier detect.js).

<HEAD>
<SCRIPT LANGUAGE="JavaScript" SRC="detect.js"></SCRIPT>

<!-Interpréter le code Javascript selon le navigateur -->
<script language="JavaScript" type="text/javascript">
<!--
  if (is_nav5up) {
     // JavaScript Netscaper 5+
  }
  else if (is_nav4) {
     // JavaScript Netscape 4
  }
  else if (is_ie4up) {
     // JavaScript IE+
  }
  else if (is_nav3 || is_opera) {
     // JavaScript Netscape 3 et Opera 
  }
  else {
     // JavaScript Navigator 2 et IE 3 
  }
//-->
</SCRIPT>
</HEAD>

 

Cette méthode est de loin supérieure et vous pouvez ajouter le script de détection en fichier INCLUDE pour ainsi n’avoir qu’un seul fichier à modifier en cas d’une nouvelle version de navigateur qui demanderait une gestion personnalisée de ses objets.

Django (Oznog) Blais
Dernière mise à jour :

Commentaires

       Visites : 911 - Pages vues : 12314
X

Trucsweb.com Connexion

Connexion

X

Trucsweb.com Mot de passe perdu

Connexion

X

Trucsweb.com Conditions générales

Conditions

Responsabilité

La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

Droit applicable et juridiction compétente

Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

X

Trucsweb.com Trucsweb

X

Trucsweb.com Glossaire

X

Trucsweb.com Trucsweb

X

Trucsweb.com Trucsweb

Conditions

Aucun message!

Merci.

X
Aucun message!
X

Trucsweb.com Créer un compte

Créer un compte

.
@