COURS JavaScript


Accueil | Les Objets JavaScript : L'objet navigator

Les propriétés de l'objet navigator : Fiche de la propriété .mimeTypes


Légende :

= Netsc 4.75 - = Netsc 6.2.1 - = Netsc 6.2.2 - = Netsc 7 beta - = Mozilla 1.0.0+ - = MIE 6.0 - = Opera 6.01


C'est une propriété de l'objet : navigator
Navigateurs testés Pas implémenté dans MIE
Lecture oui
Ecriture non
Valeur retournée Retourne une table d'objets des types mime supportés par le navigateur du client.
Type de la valeur retournée Chaîne de caractères
Valeurs possibles voir plus bas
Version de JavaScript  
Voir le résultat avec votre navigateur voir (soyez patient, ça peut être un peu long à afficher !! Mais ça marche...)

 


Syntaxe

En fait, cette propriété retourne une table (un vecteur) dont chaque poste contiendra lui même un objet (qui aura donc aussi des propriétés) représentant chaque type mime supporté par le navigateur du client. Qu'ils soient supportés dans le navigateur lui même ou par l'intermédiaire d'un plugin. Nous aurons donc plusieurs syntaxes possibles suivant que nous voulons savoir si le navigateur du client supporte un type mime particulier dont nous connaissons le nom très exactement ou bien que nous voulons détecter tous les types mime supportés par le navigateur du client.
Comme chaque type mime est lui même un objet, nous serons en présence d'une table d'objets. Nous devrons alors demander de voir une propriété particulière de l'objet mimeType en question.

Comme toute table (vecteur) la table renvoyée par la propriété .mimeTypes de l'objet navigator (si vous êtes sous Netscape seulement, car cette propriété n'est pas implémentée dans MIE) possède elle même la propriété .length qui nous dit combien de postes contient la table. Une première syntaxe de cette propriété sera donc :

navigator.mimeTypes.length ;

Le résulta sera le nombre de type mime supportés par votre navigateur. Si vous êtes bien sous Netscape, cliquez ICI pour voir le résultat.

Comme chaque poste de la table contient un objet mimeType (objet officiel de Netscape), chacun de ces objets possèdent eux mêmes des propriétés. Elles sont les suivantes :

type : donne le type du type mime.
description : décrit le type mime
suffixes : liste les extensions de fichier reconnus pour ce type mime
enabledPlugin.name : détermine quel est le nom du plugin nécessaire pour ce type mime

Comme nous sommes en présence d'une table d'objets, chaque objet mimeType est rangé (comme dans toute table) dans des postes de la table. N'oubliez jamais que les tables en JavaScript commencent par le poste 0 (zéro). Si nous ne connaissons pas le nom exact du type mime recherché, nous pouvons toujours balayer tous les postes de la table et regarder une des propriétés de l'objet mimeType contenu dans ce poste. Nous devrons donc écrire (et c'est une autre syntaxe de l'utilisation de cette propriété mimeTypes de l'objet navigator :

navigator.mimeTypes[27].type ; // par exemple

pour connaître le type de l'objet mimeType contenu dans le poste numéro 27 de la table renvoyée par l'utilisation de la propriété mimeTypes de l'objet navigator.

De la même manière, vous pouvez accéder au contenu de sa propriété description en écrivant :

navigator.mimeTypes[27]Description ; //

Pour connaître les suffixes (extensions des noms de fichiers sur le disque dur) qui sont reconnus comme étant de ce type par votre navigateur, vous écrirez :

navigator.mimeTypes[27].suffixes ; //

Et pour connaître le nom du plugIn nécessaire pour supporter ce type mime, vous écrirez :

navigator.mimeTypes[27].enabledPlugin.name ; //

en cliquant ICI vous pourrez voir tout ça pour votre navigateur. Soyez patient, car ça peut être un peu long pour répertorier tous les types mime de votre navigateur. Moi, j'en ai 370... !! Un rien....

Il existe une autre syntaxe si vous connaissez le type de mime que vous recherchez sur le navigateur du client. Si vous cherchez par exemple à savoir s'il peut lire les vidéo au format quickTime dont le type est : "video/quicktime" il vous suffira d'écrire :

var LaVideoQuickTime = navigator.mimeTypes["video/quicktime"] ;

Puis de tester dans une structure alternative :

if (LaVideoQuickTime){ // début du if
"Vous pouvez voir les vidéos de type QuickTime qui ont les extensions : " + LaVideoQuickTime.suffixes ;
}else{ // sinon
"Dommage. Votre navigateur ne supporte pas les type QuickTime..." ;
} // fin du if

De cette manière, vous pouvez tester si le navigateur du client supporte la lecture d'un fichier que vous avez sur votre site ou non. Dans un cas comme dans l'autre, vous le dirigez vers la page conçue spécifiquement pour lui ou vous lui affichez un message pour lui dire quel plugIn télécharger pour pouvoir voir ce que vous avez sur votre site.


Utilisation

Ici, l'utilisation est évidente. Lorsque vous créez un site internet qui propose à l'utilisateur de voir une image, une vidéo ou tout autre type de fichier pas très standard, vous pouvez tester d'abord si le navigateur de l'internaute qui vient sur votre site supporte le type mime de ce que vous lui proposez. Si oui, tant mieux, tout va bien, sinon vous lui ouvrez un message lui disant ce qu'il doit faire ou télécharger pour pouvoir regarder correctement vos créations.

 


Exemples

1) Détecter si le navigateur du client supporte un type mime particulier

Nous avons déjà l'exemple utilisé dans le chapitre de la syntaxe, sur la vidéo. Je vous le redonne... Il faut bien sûr connaître l'orthographe de ce type mime. Vous le trouverez dans les préférences de votre navigateur.

var LaVideoQuickTime = navigator.mimeTypes["video/quicktime"] ;

puis de tester dans une structure alternative :

if (LaVideoQuickTime){ // début du if
"vous pouvez voir les vidéos de type QuickTime qui ont les extensions : " + LaVideoQuickTime.suffixes ;
}else{ // sinon
"Dommage. Votre navigateur ne supporte pas les type QuickTime..." ;
} // fin du if

De cette manière, vous pouvez tester si le navigateur du client supporte la lecture d'un fichier que vous avez sur votre site ou non. Dans un cas comme dans l'autre, vous le dirigez vers la page conçue spécifiquement pour lui ou vous lui affichez un message pour lui dire quel plugIn télécharger pour pouvoir voir ce que vous avez sur votre site.

2) Lister tous les types mime de votre navigateur ou l'afficher au client

Pour lister l'intégralité des types mime supportés par votre navigateur(comme ce que j'ai fait pour vous montrer dans le lien "voir"), ou l'afficher au client, vous pouvez faire une boucle sur la table générée par l'utilisation de la propriété .mimeTypes de l'objet navigator .

Pour pouvoir afficher le résultat de votre lecture dans une page, je vous conseille de créer une variable destinée à recevoir le code html que vous allez construire puis d'afficher cette variable par les instructions :

var VotreVariable ;

document.open();
document.write(VotreVariable);
document.close();

ce qui est plus commode et beaucoup plus facile. J'explique :

Au départ, vous déclarez une variable. Moi, j'utilise toujours une variable que j'appelle "Mess" (les anglophones comprendront :-)) pour Message. Puis je rempli cette variable de chaînes de caractères pour constituer une vraie page html que j'envoie ensuite dans le navigateur par le groupe d'instructions .open(), .write(Mess) puis .close() vues ci-dessus. Les instructions Open(), .write() et Close() sont des méthodes de l'objet document. Vous savez déjà comment concaténer des chaînes de caractères par le signe "+". Voici le programme :

var Mess = " " ; // initialisation de la variable
Mess += "<br>voici la liste de tous les types mime supportés par votre navigateur :<P>" ;// mise en place du titre

for (var i=0; i< navigator.mimeTypes.length ; i++) {// boucle sur toute la table

Mess += "Le poste " + i + " contient le <b>type</b> : " ;
Mess += navigator.mimeTypes[i].type ;
Mess += "<b> Description </b>: " + navigator.mimeTypes[i]Description ;
Mess += "<b> Suffixes</b> : " + navigator.mimeTypes[i].suffixes ;

if (navigator.mimeTypes[i].enabledPlugin) { // seulement si ce type nécessite un plugin. Autrement erreur
Mess += "<b> PlugIn nécessaire</b> : " + navigator.mimeTypes[i].enabledPlugin.name ;
}else{
Mess += "<b> PlugIn nécessaire</b> : Pas besoin "; // pas besoin de plugin pour ce type
}// fin if

Mess += "<br><br>" ; // pour passer une ligne

} // fin for

document.open();
document.write(Mess);
document.close();

Le résultat est ce que vous voyez en cliquant sur voir. Il est indispensable de tester si le type mime correspondant à l'objet qui se trouve à l'indice i dans l'instruction navigator.mimeTypes[i].enabledPlugin.name de la table a besoin d'un plugIn ou non, car s'il n'en a pas besoin, la valeur est "null" et le programme se plante en disant que navigator.mimeTypes[i].enabledPlugin.name n'a pas de propriété. Ce qui est exact puisque "null" n'est pas un objet.



Ce cours est enseigné par Philippe Médan 
dans le cadre de la formation des professionnels de l'INTERNET.
au CREFAC , 14 rue Scandicci, 93000 Pantin. Tél. : 01 48 46 51 99
au GITA-GRETA , Lycée Technologique Diderot 61, rue David D'Angers 75019 Paris Tél. : 01 40 40 36 27
au CESI à l'Ecole des ingénieurs, 116 Av Aristide Briand, BP 57, 92224 Bagneux CEDEX Tél. : 01 45 36 70 00
au CFA-AFIA Centre de Formation par l'Apprentissage spécialisé en Informatique DUT Licence MIAGE,
PUIO - Bâtiment 640 - Plateau du Moulon - 91405 Orsay Tél. : 01 69 15 35 19.

© Philippe Médan 1999-2007. Tous droits de reproduction réservés pour tous pays.