web-dev-qa-db-fra.com

Meilleur moyen de déterminer les paramètres régionaux de l'utilisateur dans le navigateur

J'ai un site Web (Flash) localisé dans une douzaine de langues et je souhaite définir automatiquement une valeur par défaut en fonction des paramètres du navigateur de l'utilisateur afin de minimiser les étapes pour accéder au contenu.

Pour votre information, je ne peux pas utiliser les scripts de serveur à cause des restrictions de proxy, je suppose donc que JavaScript ou ActionScript serait approprié pour résoudre le problème.

Questions:

  1. Quelle serait la meilleure méthode pour "deviner" les paramètres régionaux de l'utilisateur?

  2. Existe-t-il des classes/fonctions simples existantes qui pourraient m'aider (pas de bundles de localisation complexes)? Spécialement pour décomposer intelligemment toutes les langues possibles en un nombre plus petit (les traductions que j'ai).

  3. À quel point puis-je faire confiance à une telle solution?

  4. D'autres solutions ou suggestions?

javascriptflashbrowserlocalization
162
Theo.T

La bonne façon consiste à examiner l'en-tête HTTP Accept-Language envoyé au serveur. Celui-ci contient la liste ordonnée et pondérée des langues que l'utilisateur a configurées pour son navigateur.

Malheureusement, cet en-tête n'est pas disponible pour la lecture dans JavaScript. tout ce que vous obtenez est navigator.language, qui vous indique quelle version localisée du navigateur Web a été installée. Ce n'est pas nécessairement la même chose que la ou les langues préférées de l'utilisateur. Sur IE, vous obtenez plutôt systemLanguage (langue installée du système d'exploitation), browserLanguage (identique à language) et userLanguage (région de système d'exploitation configurée par l'utilisateur), qui sont tout aussi inutiles.

Si je devais choisir entre ces propriétés, je rechercherais d'abord userLanguage, puis je retomberai sur language et seulement après cela (si celles-ci ne correspondent à aucune langue disponible), en regardant browserLanguage et enfin systemLanguage.

Si vous pouvez placer un script côté serveur ailleurs sur le réseau, il se contente de lire l'en-tête Accept-Language et de le convertir en fichier JavaScript avec la valeur de l'en-tête dans la chaîne, par exemple:

var acceptLanguage= 'en-gb,en;q=0.7,de;q=0.3';

vous pouvez ensuite inclure un code <script src> pointant sur ce service externe dans le code HTML et utiliser JavaScript pour analyser l'en-tête de la langue. Je ne connais pas de code de bibliothèque existant pour cela, cependant, car l'analyse syntaxique de Accept-Language est presque toujours effectuée du côté serveur.

Quoi que vous finissiez de faire, vous avez certainement besoin d'une substitution d'utilisateur, car certaines personnes deviendront toujours fausses. Il est souvent plus facile de définir le paramètre de langue dans l’URL (par exemple, http: //www.example.com/fr/site vs http: //www.example.com/de/site) et de laisser l’utilisateur cliquer liens entre les deux. Parfois, vous souhaitez une seule URL pour les deux versions linguistiques. Dans ce cas, vous devez enregistrer le paramètre dans des cookies. Toutefois, cela peut confondre les agents utilisateurs sans prise en charge des cookies et des moteurs de recherche.

167
bobince

Sur Chrome et Firefox 32+, navigator.languages ​​contient un tableau de paramètres régionaux par ordre de préférence de l'utilisateur. Il est plus précis que navigator.language, mais il est toutefois compatible avec les versions antérieures (Testé Chrome/IE/Firefox/Safari), utilisez ceci:

function getLang()
{
 if (navigator.languages != undefined) 
 return navigator.languages[0]; 
 else 
 return navigator.language;
}
64
Fiach Reid

Cet article suggère les propriétés suivantes de l'objet navigateur du navigateur :

  • navigator.language (Netscape - Localisation du navigateur)
  • navigator.browserLanguage (spécifique à IE - Langue localisée du navigateur)
  • navigator.systemLanguage (Spécifique à Internet Explorer - Windows OS - Langue localisée)
  • navigator.userLanguage

Roulez-les dans une fonction javascript et vous devriez être capable de deviner le bon langage, dans la plupart des cas. Assurez-vous de dégrader avec élégance. Créez donc une div contenant les liens de votre choix de langue, de sorte que s’il n’ya pas de javascript ou que la méthode ne fonctionne pas, l’utilisateur peut quand même décider. Si cela fonctionne, cachez simplement la div.

Le seul problème avec cette opération côté client est que vous transmettez toutes les langues au client ou vous devez attendre que le script soit exécuté et que la langue a été détectée avant. demander la bonne version. Peut-être que la version par défaut de la version la plus populaire du langage irrite le moins de gens possible.

Edit: J'appuie la suggestion d'Ivan concernant les cookies, mais assurez-vous que l'utilisateur peut toujours changer la langue plus tard; tout le monde ne préfère pas la langue de leur navigateur par défaut.

40
Phil H

En combinant les différentes manières dont les navigateurs utilisent pour stocker la langue de l'utilisateur, vous obtenez cette fonction:

const getNavigatorLanguage = () => {
  if (navigator.languages && navigator.languages.length) {
    return navigator.languages[0];
  } else {
    return navigator.userLanguage || navigator.language || navigator.browserLanguage || 'en';
  }
}

Nous vérifions d’abord le tableau navigator.languages pour son premier élément.
Ensuite, nous obtenons soit navigator.userLanguage ou navigator.language.
Si cela échoue, nous obtenons navigator.browserLanguage.
Enfin, nous le configurons sur 'en' si tout le reste échoue.

Et voici le one-liner sexy:

const getNavigatorLanguage = () => (navigator.languages && navigator.languages.length) ? navigator.languages[0] : navigator.userLanguage || navigator.language || navigator.browserLanguage || 'en';
22
Zenoo

J'ai fait un peu de recherche à ce sujet et j'ai résumé mes résultats jusqu'à présent dans le tableau ci-dessous

enter image description here

La solution recommandée consiste donc à écrire un script côté serveur pour analyser l'en-tête Accept-Language et le transmettre au client pour définir la langue du site Web. C’est bizarre que le serveur soit nécessaire pour détecter la préférence de langue du client, mais c’est comme cela à partir de maintenant. Il existe différents types de hacks disponibles pour détecter la langue, mais la lecture de l’en-tête Accept-Language est la solution recommandée selon mon compréhension.

3
Abhishek V

Il existe une différence entre les langues préférées de l'utilisateur et les paramètres régionaux du système/navigateur.

Un utilisateur peut configurer les langues préférées dans le navigateur. Celles-ci seront utilisées pour navigator.language(s), et lors de la demande de ressources à un serveur, pour demander un contenu en fonction d'une liste de priorités de langue.

Toutefois, les paramètres régionaux du navigateur décideront comment afficher le nombre, la date, l'heure et la devise. Ce paramètre est probablement la langue la mieux classée, mais il n'y a aucune garantie. Sur Mac et Linux, les paramètres régionaux sont définis par le système, quelles que soient les préférences de langue de l'utilisateur. Sous Windows, vous pouvez choisir parmi les langues de la liste de préférences sur Chrome.

En utilisant Intl ( https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl ), les développeurs peuvent remplacer/définir les paramètres régionaux à utiliser pour restituer ces informations. choses, mais il y a des éléments qui ne peuvent pas être remplacés, tels que le format <input type="date">.

Pour extraire correctement cette langue, le seul moyen que j'ai trouvé est:

(new Intl.NumberFormat()).resolvedOptions().locale

(Intl.NumberFormat().resolvedOptions().locale semble également fonctionner)

Cela créera une nouvelle instance NumberFormat pour les paramètres régionaux par défaut, puis en relisant les paramètres régionaux de ces options résolues.

1
Patrik Kullman - Neovici

Vous pouvez également essayer d'obtenir la langue du document qui pourrait être votre premier port d'escale, puis de revenir à d'autres moyens, car souvent les gens voudront que leur langue JS corresponde à celle du document.

HTML5:

document.querySelector('html').getAttribute('lang')

Héritage:

document.querySelector('meta[http-equiv=content-language]').getAttribute('content')

Aucune source réelle n'est nécessairement fiable à 100%, car les utilisateurs peuvent simplement s'exprimer dans la mauvaise langue.

Certaines bibliothèques de détection de langue peuvent vous permettre de déterminer la langue par contenu.

0
jgmjgm