JavaScript pour détecter la préférence linguistique du navigateur

Question

J'ai essayé de détecter la préférence de langue du navigateur en utilisant JavaScript.

Si je définis la langue du navigateur dans IE dans Tools>Internet Options>General>Languages comment puis-je lire cette valeur en utilisant JavaScript ?

Même problème pour Firefox. Je ne suis pas en mesure de détecter le paramètre pour tools>options>content>languages en utilisant navigator.language .

Utilisation de navigator.userLanguage il détecte le réglage effectué par Start>ControlPanel>RegionalandLanguageOptions>Regional Options onglet.

J'ai testé avec navigator.browserLanguage y navigator.systemLanguage mais aucun ne renvoie la valeur du premier paramètre( Tools>InternetOptions>General>Languages )

J'ai trouvé un lien qui en parle en détail, mais la question reste sans réponse :(

Answer 1

Je pense que le principal problème ici est que les paramètres du navigateur n'affectent pas réellement le système de gestion de l'information. navigator.language qui est obtenue via javascript.

Ce qu'ils affectent, c'est l'en-tête HTTP "Accept-Language", mais il semble que cette valeur ne soit pas du tout disponible en javascript. (C'est probablement la raison pour laquelle @anddoutoi déclare ne pas pouvoir trouver de référence à ce sujet qui n'implique pas le côté serveur).

J'ai codé une solution de rechange : J'ai mis en place un script de google app engine à http://ajaxhttpheaders.appspot.com qui vous renverra les en-têtes de la requête HTTP via JSONP.

(Remarque : il s'agit d'une astuce à n'utiliser que si vous ne disposez pas d'un back-end capable de le faire pour vous. En général, vous ne devriez pas faire d'appels à des fichiers javascript hébergés par des tiers dans vos pages, sauf si vous avez un très haut niveau de confiance dans l'hôte).

J'ai l'intention de le laisser là à perpétuité, alors n'hésitez pas à l'utiliser dans votre code.

Voici un exemple de code (en jQuery) pour savoir comment l'utiliser.

$.ajax({ 
    url: "http://ajaxhttpheaders.appspot.com", 
    dataType: 'jsonp', 
    success: function(headers) {
        language = headers['Accept-Language'];
        nowDoSomethingWithIt(language);
    }
});

J'espère que quelqu'un trouvera cela utile.

Edit : J'ai écrit un petit plugin jQuery sur github qui englobe cette fonctionnalité : https://github.com/dansingerman/jQuery-Browser-Language

Edit 2 : Comme demandé, voici le code qui fonctionne sur AppEngine (super trivial vraiment) :

class MainPage(webapp.RequestHandler):
    def get(self):
        headers = self.request.headers
        callback = self.request.get('callback')

        if callback:
          self.response.headers['Content-Type'] = 'application/javascript'
          self.response.out.write(callback + "(")
          self.response.out.write(headers)
          self.response.out.write(")")
        else:
          self.response.headers['Content-Type'] = 'text/plain'
          self.response.out.write("I need a callback=")

application = webapp.WSGIApplication(
                                     [('/', MainPage)],
                                     debug=False)

def main():
    run_wsgi_app(application)

if __name__ == "__main__":
    main()

Edit3 : J'ai ouvert le code du moteur d'application ici : https://github.com/dansingerman/app-engine-headers

Answer 2

var language = window.navigator.userLanguage || window.navigator.language;
alert(language); //works IE/SAFARI/CHROME/FF

window.navigator.userLanguage est réservé à IE et c'est la langue définie en Panneau de configuration de Windows - Options régionales et NON la langue du navigateur, mais on peut supposer qu'un utilisateur utilisant une machine dont les paramètres régionaux de Window sont réglés sur la France est probablement un utilisateur français.

navigator.language est FireFox et tous les autres navigateurs.

Un code de langue : 'it' = l'Italie, 'en-US' = anglais US, etc.

---

Comme l'a souligné rcoup y Le WebMacheur dans les commentaires ci-dessous, cette solution de contournement ne vous permettra pas de faire la distinction entre les dialectes anglais lorsque les utilisateurs consultent le site Web dans des navigateurs autres que IE.

window.navigator.language (Chrome/FF/Safari) renvoie toujours la langue du navigateur et non la langue préférée du navigateur, mais : "il est assez courant pour les anglophones (gb, au, nz, etc) d'avoir une version en-us de Firefox/Chrome/Safari". D'où window.navigator.language retournera toujours en-US même si la langue préférée de l'utilisateur est en-GB .

Answer 3

Mise à jour de l'année 2014.

Il existe maintenant un moyen d'obtenir Accept-Languages dans Firefox et Chrome en utilisant navigator.languages (fonctionne dans Chrome >= 32 et Firefox >= 32)

Aussi, langue.du navigateur dans Firefox ces dernières années reflète la langue préférée du contenu, et non celle de l'interface utilisateur. Mais comme cette notion n'est pas encore prise en charge par les autres navigateurs, elle n'est pas très utile.

Il faut donc privilégier la langue du contenu lorsque c'est possible, et utiliser la langue de l'interface utilisateur comme solution de rechange :

navigator.languages
    ? navigator.languages[0]
    : (navigator.language || navigator.userLanguage)

Answer 4

Je suis tombé sur ce morceau de code pour détecter la langue du navigateur en Module Angular Translate dont vous pouvez trouver la source aquí . J'ai légèrement modifié le code en remplaçant angular.isArray par Array.isArray pour le rendre indépendant de la bibliothèque Angular.

var getFirstBrowserLanguage = function () {
    var nav = window.navigator,
    browserLanguagePropertyKeys = ['language', 'browserLanguage', 'systemLanguage', 'userLanguage'],
    i,
    language;

    // support for HTML 5.1 "navigator.languages"
    if (Array.isArray(nav.languages)) {
      for (i = 0; i < nav.languages.length; i++) {
        language = nav.languages[i];
        if (language && language.length) {
          return language;
        }
      }
    }

    // support for other well known properties in browsers
    for (i = 0; i < browserLanguagePropertyKeys.length; i++) {
      language = nav[browserLanguagePropertyKeys[i]];
      if (language && language.length) {
        return language;
      }
    }

    return null;
  };

console.log(getFirstBrowserLanguage());

Answer 5

let lang = window.navigator.languages ? window.navigator.languages[0] : null;
    lang = lang || window.navigator.language || window.navigator.browserLanguage || window.navigator.userLanguage;

let shortLang = lang;
if (shortLang.indexOf('-') !== -1)
    shortLang = shortLang.split('-')[0];

if (shortLang.indexOf('_') !== -1)
    shortLang = shortLang.split('_')[0];

console.log(lang, shortLang);

Je n'ai eu besoin que du composant primaire pour mes besoins, mais vous pouvez facilement utiliser la chaîne complète. Fonctionne avec les dernières versions de Chrome, Firefox, Safari et IE10+.