- · 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.
![[Photo]](https://www.trucsweb.com/documents/images/2024/js-bs-formulaire-fetch.png)
Formulaire Bootstrap 5 Ajax avec validation.![[Photo]](https://www.trucsweb.com/documents/images/2023/elephants-Salvador_Dali_1948.jpg)
Sécuriser l’accès « bureau à distance » sous IIS![[Photo]](https://www.trucsweb.com/documents/images/2023/trou_noir_galaxie_M87.jpg)
L’AI au temps du Far-Web![[Photo]](https://www.trucsweb.com/documents/images/2023/gilles-villeneuve-montreal1978.jpg)
Sélecteurs JavaScript querySelector() et querySelectorAll()![[Photo]](http://www.trucsweb.com/documents/images/2023/evolution_de_lhomme.jpg)
CSS - Animations![[Photo]](http://www.trucsweb.com/documents/images/2023/univers-copernic.jpg)
Mode de couleurs (Color modes) Bootstrap 5![[Photo]](http://www.trucsweb.com/documents/images/2023/les_burgers_de_papa.jpg)
25 ans des Trucsweb - Bouton hamburger animé Bootstrap 5![[Photo]](http://www.trucsweb.com/documents/images/logos/l_whatwg.svg)
Living Standard pour HTML de Apple, Google, Mozilla, Microsoft ...et la W3C![[Photo]](http://www.trucsweb.com/documents/images/2022/tim-berners-lee-web-b.jpg)
Le nouveau HTML « Living Standard » et le XML![[Photo]](http://www.trucsweb.com/documents/images/2022/v_jacques_dutronc-les_cactus.jpg)
Sécuriser un formulaire de contact au Far-Web!![[Photo]](http://www.trucsweb.com/dhtml/l_dhtml.gif)
AbuseIPDB
Connexion