Javascript - Détection d'objet

La traduction est en cours, si vous trouvez une erreur sur une page ou si vous souhaitez suggérer une amélioration, n'hésitez pas à utiliser le forum.

Détection d'objet

Opéra 6 indique qu’il supporte createElement bien qu'il ne puisse pas réellement ajouter l'élément créé au document. Opéra 7 supporte createElement correctement. Il n'y a cependant aucune manière de filtrer un opéra plus ancien, excepté pour un détecteur de navigateur. Ainsi je ne fais rien.

Assez rapidement vous noterez que certaines fonctions de JavaScript ne fonctionnent pas dans certains navigateurs. Si vous voulez employer un bout de script assez évolué, vous devez d'abord vérifier si un navigateur supporte les objets que vous voulez employer. Cette page explique comment le faire.

Tout d’abord je vous donne quelques informations et règles générales, puis des indications sur les effets usuels qui ne sont pas supportés par tous les navigateurs, et les moyens de pouvoir les détecter.

Détection de navigateur - non

Si vous voulez savoir si votre navigateur supporte certains objets que vous voulez utiliser dans votre code, évitez à tous prix d’utiliser un détecteur de navigateur. Bien sûr vous savez que tel ou tel navigateur fera fonctionner votre code, alors que tel ou tel autre ne le pourra pas, mais qu’en est-il des navigateurs moins courants ?

Alors que la détection de navigateur fonctionne assez bien pour 90% de vos visiteurs, quelques navigateurs moins courant ne la traiteront pas correctement et des navigateurs qui apparaissent après que vous ayez écrit la page, peuvent également ne pas la considérer. Les résultats seraient alors un jet de messages d'erreurs ou un script qui n’est pas appelé alors que le navigateur peut facilement l’exécuter. Dans les deux cas, vous trichez avec vos utilisateurs et vous codez incorrectement.

Étude de cas : mouseovers

Une vieille étude de cas clarifiera des choses. De nos jours cet exemple particulier n'est plus vraiment un problème, mais les principes sont encore valides.

C'est un fait bien connu qu’Internet Explorer 3 ne supporte pas le tableau document.images qui est essentiel pour le script mouseover. Nous devons donc empêcher le script d'être exécutée dans Internet Explorer 3. Une solution serait de faire un détecteur de navigateur pour l'explorer 3 et de ne pas exécuter les fonctions si l'utilisateur visionne votre page avec celui-ci.

Cependant, sur la plupart des OS Netscape 2 ne supportera pas non plus document.images Si vous faites juste un détecteur de navigateur pour Internet Explorer 3, vous laissez les utilisateurs de Netscape 2 avec des messages d’erreurs.

Donc pourquoi ne pas ajouter Netscape 2 à votre détecteur de navigateur ? Parce que cela ne résout rien.

Netscape 2 sur OS/2 est presque totalement compatible avec Netscape 3 et il peut manipuler des effets de mouseover. Néanmoins d’une manière générale, les effets ne sont pas visibles parce que les développeurs web ont utilisé un détecteur de navigateur et ils ont décidés que Netscape 2 ne pourrait probablement pas soutenir un mouseover. Ils ont donc bridés leurs utilisateurs d’un peu d’interaction et sans bonne raison. Un détecteur d’objet approprié aurait évité ces problèmes.

Pour finir, de plus en plus de navigateurs donnent à l'utilisateur la possibilité pour de modifier à sa guise son code d'identification de navigateur (voyez la page détecteur de navigateur. Par conséquent il est tout à fait possible qu'un détecteur de navigateur n'identifie pas le navigateur et exclut donc des fonctionnalités qu'il aurait put pu supporter sans soucis. Ici, à nouveau, vous bridez vos utilisateurs d'un peu d'interaction supplémentaire. Pire encore, c'est un mauvais codage.

Versions de Javascript - non

En concevant le Javascript, Netscape se rendait entièrement compte que les futurs navigateurs soutiendraient plus d'objets que les anciens, et que les développeurs web devraient pouvoir faire la distinction entre anciens et nouveaux navigateurs.

Le plan original était qu'ils vérifieraient le numéro de version de JavaScript. Tel-ou-tel objet était seulement fait pour être utilisable avec JavaScript 1.XX. Employez le numéro de version de JavaScript dans votre balise <script> et les navigateurs qui ne supportent pas l'objet ne pourront pas exécuter le script.

Cependant, quand Microsoft est rentré sur le marché, cette idée a été abandonnée. Bien que les premières versions de Netscape 4 et d'explorer 4 aient toutes les deux supportées le Javascript 1.2, même avec beaucoup d’imagination on ne peu pas penser qu’ils supportent le même JavaScript 1.2 . Avec ceci les numéros de version sont devenus désuets et non pertinents à la détection d'objet.

Détection d'objet - oui

Au lieu de cela, nous allons simplement regarder si le navigateur supporte l'objet (méthode, tableau ou propriété) que nous voulons employer. Regardons avec l’exemple du mouseover. Ce script se fonde sur le tableau document.images car nous avons grand besoin de savoir si le navigateur le supporte. Ceci est fait par

Maintenant vous avez une méthode sûre de voir si les navigateurs peuvent manipuler le mouseovers. Le if (declaration) contrôle si le tableau document.images existe. Si (document.images) est true (vrai) alors le script est exécuté. Si le tableau images n'existe pas il devient false (faux) et le script n'est pas exécuté.

Une autre détection usuelle ce fait pour window.focus. C'est une méthode (une commande par laquelle vous dites à Javascript de faire quelque chose pour vous). Si nous voulons employer la méthode, nous devrons d’abord vérifier si le navigateur la supporte.

Notez la manière correcte : vous demandez la méthode, sans parenthèses. Par ce code

veut dire : "si vous pouvez mettre le focus sur la fenêtre". Ainsi vous supposez que le focus est supporté. S'il ne l’est pas, cette ligne de code crée des erreurs. Les parenthèses () exécutent la commande focus, ce qui n'est pas qui ce que nous voulons dans ce cas-ci. Ainsi nous la vérifions sans parenthèses (pour voir si elle existe) et seulement quand le navigateur passe le contrôle nous exécutons réellement la commande en ajoutant des parenthèses :

Bilan

Ainsi le bilan serait qu’en cas d’emploie de tableau document.images, le premier contrôle servira a savoir si il est supporté. Si vous voulez utiliser la méthode de focus de fenêtre, le premier contrôle sera également de savoir si elle est supportée.

Si vous employez toujours la détection d'objet, vos scripts ne produiront jamais aucun message d'erreur, bien qu'ils pourraient ne pas fonctionner dans certains navigateurs.

Non supporté

Finalement quelques informations au sujet des anciens effets qui ont besoin de la détection d'objet.

document.images

Netscape 2 et Internet Explorer 3 sur Windows: aucun support

Internet Explorer 3 sur Mac: dit qu'il supporte document.images mais ne fait actuellement pas de permutation d’images. Cependant, il ne donne pas d’erreurs.

Netscape 3.01 (et Hotjava 3) le supporte mais il y a un autre problème : dans ces navigateurs, les images ne sont pas vraiment changées, mais sont plutôt placées l'une sur l'autre. Ce problème est résolu dans Netscape 3.04 et les suivants. Le nouveau Hotjava 3 que j'ai téléchargé à la maison semble aussi avoir résolu ce bug.

Opera 3.60, enfin, a des problèmes avec le script cross-frame mouseover.

document.images est le tableau Javascript qui donne l'accès aux images dans une page. Si vous voulez ajouter un onMouseOver à vos pages vous employez document.images, ce qui signifie que les navigateurs qui ne peuvent pas le supporter ne font pas l'échange d'image et donnent pleins d'erreurs.

Heureusement vous pouvez éviter les erreurs en écrivant toujours les fonctions qui font quelque chose avec document.images comme ceci :

Ainsi le script est seulement exécuté quand le navigateur supporte document.images. Les navigateurs ne le supportant pas n'obtiennent pas l'effet demandé mais également aucune erreur.

window.focus

Hotjava 3 a un support buggé. L'exemple de cette page fonctionne, mais d'autres sur ce site ne fonctionne pas. Je n'ai aucune idée du problème.

Netscape 4 sur Linux le supporte, mais quand vous étendez le focus sur quelque chose qui n'est actuellement pas sur l'écran, la page ne défile pas pour montrer l'élément sur lequel vous avez étendu le focus. Ca prête vraiment à confusion.

Opera 3 et 4 d’étendre le focus sur une autre fenêtre quand vous faites appel à un script dans une autre fenêtre (cross-window JavaScripting), bien que dans d'autres circonstances elle supporte le focus. Ceci est résolu dans opéra 5, excepté sous Linux.

Opera 5 sur Mac indique qu'il supporte le focus() mais en fait il ne fait rien.

Un dispositif utile de Javascript est sa capacité à placer le focus sur une certaine fenêtre ou un certain élément dans cette fenêtre, par exemple un élément de formulaire.

Si vous chargez des pages dans des pop-ups il est également utile de placer le focus sur le pop-up de sorte que l'utilisateur puisse suivre ce qui se passe. Ce n’est absolument pas nécessaire pour faire fonctionner la page, mais c'est un service supplémentaire sympathique.

J’ai d’abord pensée que Netscape 2 et explorer 3 ne supporte pas du tout le focus. Cependant, il s'avère que Netscape 2 supporte le focus, mais pas au niveau des fenêtres. Il est, cependant, parfaitement possible de faire un focus sur des champs de formulaire.
Jeff Howden, qui a corrigé l'erreur, propose de ne pas employer du tout la détection d'objet pour des champs de formulaire, puisque tous les navigateurs connus supportent la méthode de focus. Je pense qu’il a raison, ainsi quand vous voulez employer la méthode de focus sur des champs de formulaire, vous n’êtes pas obligé d’employer une détection d'objet.

Par conséquent je n'emploie pas du tout la détection d'objet dans mon script de vérification de champ de texte, où je mets le focus sur un élément du formulaire.

DHTML

Le DHTML est supporté par Netscape 4+, Explorer 4+, Opera 5, Escape 4, Konqueror, iCab et Omniweb.

Le Dynamic HTML est le changement des déclarations de style d'un élément HTML au moyen de Javascript.

Pour utiliser le DHTML, le navigateur doit supporter un des DOM intermédiaire. (DOM : Document Object Model). Ici la détection d'objet est extrêmement importante, puisqu'il y ni a pas moins de trois DOM avancés et vous devez découvrir lequel sera supporté par le navigateur et le placer sur le bon morceau de code. Pour un contrôle général “Ce navigateur peut-il utiliser du DHTML” ; J'emploie :

Dans ce cas-ci nous vérifions les trois objets possibles, puisqu'il y a actuellement trois ensembles de code qu’un navigateur peut supporter. Seulement un des trois objets a besoin d'être supporté pour que le DHTML puisse fonctionner, ainsi nous utilisons l'opérateur booléen || (OU).

Quand nous parlerons du script spécifique, nous devrons donner des instructions spéciales à chaque DOM.

Ici, aussi, on pourrait employer un détecteur de navigateur, mais puisque toutes sortes de nouveaux navigateurs compatibles DHTML entrent sur le marché et que pour le moment il n’est pas évident de savoir quel DOM sera supporté, il serait dangereux de le faire. Ne vérifiez donc pas si le navigateur est explorer 4, vérifié plutôt si le navigateur peut faire fonctionner document.all. Beaucoup plus sûr à long terme.

W3C DOM

Les parties avancées du W3C DOM sont seulement supportées par Mozilla, Explorer 5 et Konqueror.

Malheureusement Opera 6 6 prétend supporté les parties avancées du DOM W3C, mais ne peut actuellement pas manipuler les scripts.

Le sujet du DOM W3C est de créer et d'enlever des éléments HTML, vous permettant ainsi de modifier les document HTML en fonctionnement. Bien sur, vous avez d’abord besoin de découvrir si le navigateur supporte actuellement le DOM W3C. La détection générale pour cela est :

Si le navigateur passe ce test, vous savez qu'il supporte au moins des parties du DOM W3C.

Cependant, pour les scripts vraiment nouveaux ce n'est pas suffisant. Opéra 5, par exemple, supporte suffisamment du nouveau DOM pour faire du DHTML mais pas assez pour supporter des scripts vraiment avancés. Par conséquent quand vous voulez vraiment utiliser un nouveau script, vous devriez commencer par cette détection d’objet :

Celui-ci contrôle dans un premier temps la présence du DOM W3C puis la présence du crucial createElement(). Si elle n'est pas supporté le navigateur n'est pas suffisamment avancé pour faire de vrais script DOM W3C. Internet Explorer 4 supporte aussi document.createElement (bien que cela fonctionne différemment de la méthode de W3C), mais nous ne voulons pas qu'il exécute les scripts. Par conséquent nous devons également vérifier getElementById.