JavaScript pour la détection de la langue de préférence du navigateur [dupliquer]

cette question a déjà une réponse ici:

  • Obtenir les visiteurs de langue et le code du pays avec javascript (côté client) [dupliquer] 3 réponses
  • meilleure façon de déterminer la localisation de l'utilisateur dans le navigateur 6 réponses

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

si j'ai défini le langage 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 capable de détecter le réglage de tools>options>content>languages en utilisant navigator.language .

en utilisant navigator.userLanguage , il détecte le réglage effectué par Start>ControlPanel>RegionalandLanguageOptions>Regional Options onglet.

j'ai testé avec navigator.browserLanguage et navigator.systemLanguage mais ni l'un ni l'autre ne renvoie la valeur pour le premier réglage( Tools>InternetOptions>General>Languages )

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

375
demandé sur phihag 2009-06-25 15:08:11

26 réponses

je pense que le problème principal ici est que les paramètres du navigateur n'affectent pas réellement la propriété navigator.language qui est obtenue via javascript.

ce qu'ils affectent est L'en-tête HTTP 'Accept-Language', mais il semble que cette valeur n'est pas disponible du tout par javascript. (Probablement pourquoi @anddoutoi déclare qu'il ne peut pas trouver de référence qui n'implique pas le côté serveur.)

j'ai codé une solution: j'ai créé une application google scénario du moteur à http://ajaxhttpheaders.appspot.com qui vous renvoie les en-têtes de requête HTTP via JSONP.

(Note: Ceci est un hack à utiliser seulement si vous n'avez pas de Back end disponible qui peut le faire pour vous. En général, vous ne devez pas faire d'appels vers des fichiers javascript hébergés par une tierce partie dans vos pages à moins que vous ayez un niveau de confiance très élevé dans l'hôte.)

j'ai l'intention de le laisser là à perpétuité afin de sentir libre de l'utiliser dans votre code.

voici un exemple de code (en jQuery) pour la façon dont vous pourriez 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 enveloppe cette fonctionnalité: https://github.com/dansingerman/jQuery-Browser-Language

Edit 2: Comme demandé voici le code qui s'exécute 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: ont ouvert la source du Code moteur app ici: https://github.com/dansingerman/app-engine-headers

257
répondu DanSingerman 2015-08-04 09:29:24
var language = window.navigator.userLanguage || window.navigator.language;
alert(language); //works IE/SAFARI/CHROME/FF

window.navigator.userLanguage is IE only and it's the language set in Windows Control Panel - Regional Options and NOT browser language, mais vous pourriez supposer qu'un utilisateur qui utilise une machine avec des paramètres régionaux de fenêtre définis pour la France est probablement un utilisateur français.

navigator.language est FireFox et tous les autres navigateurs.

Certains code de langue: 'it' = italie, 'en-US' = anglais (états-unis, etc.


comme indiqué par rcoup et le WebMacheter dans les commentaires ci-dessous, Cette solution ne vous permettra pas de faire de discrimination entre les dialectes anglais lorsque les utilisateurs consultent le site Web dans des navigateurs autres que IE.

window.navigator.language (Chrome / FF / Safari) retourne toujours la langue du navigateur et non la langue préférée du navigateur, mais: "c'est assez commun pour les anglophones (gb, au, nz, etc) à avoir une version en-us de Firefox / Chrome / Safari."De là "151950920 reste" retour en-US même si l'utilisateur langue préférée est en-GB .

216
répondu Marco Demaio 2015-01-06 13:01:03

mise à jour de l'année 2014.

maintenant il y a un moyen D'obtenir Accept-Languages dans Firefox et Chrome en utilisant navigateur.langues (œuvres en Chrome >= 32 et Firefox >= 32)

aussi, navigateur.langue dans Firefox ces années reflètent la langue de contenu la plus préférée, et non la langue de L'UI. Mais puisque cette notion est pas encore pris en charge par d'autres navigateurs, il n'est pas très utile.

donc, pour obtenir le langage de contenu le plus préféré quand c'est possible, et utiliser le langage D'UI comme solution de rechange:

navigator.languages
    ? navigator.languages[0]
    : (navigator.language || navigator.userLanguage)
185
répondu Tim Babych 2016-03-08 20:24:47

j'ai trouvé ce morceau de code pour détecter le langage du navigateur dans module de traduction angulaire , dont vous pouvez trouver la source ici . J'ai légèrement modifié le code en remplaçant angulaire.isArray avec le Tableau.isArray pour le rendre indépendant de la bibliothèque angulaire.

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());
44
répondu Hamid 2017-05-17 18:54:41

var language = navigator.languages && navigator.languages[0] || // Chrome / Firefox
               navigator.language ||   // All browsers
               navigator.userLanguage; // IE <= 10

console.log(language);

Essayer PWA Modèle https://github.com/StartPolymer/progressive-web-app-template

28
répondu Josef Ježek 2016-07-02 09:40:53
<script type="text/javascript">
var lang = window.navigator.languages ? window.navigator.languages[0] : null;
    lang = lang || window.navigator.language || window.navigator.browserLanguage || window.navigator.userLanguage;
if (lang.indexOf('-') !== -1)
    lang = lang.split('-')[0];

if (lang.indexOf('_') !== -1)
    lang = lang.split('_')[0];
</script>

j'avais seulement besoin du composant principal 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+.

27
répondu Kristian Williams 2014-11-12 14:16:21

il n'y a pas de façon décente d'obtenir ce paramètre, du moins pas quelque chose d'indépendant du navigateur.

mais le serveur possède cette information, car il fait partie de L'en-tête de requête HTTP (le champ Accept-Language, voir ). http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.4 )

donc le seul moyen fiable est d'obtenir une réponse à partir du serveur. Vous aurez besoin de quelque chose qui tourne sur le serveur (comme .ASP. ,JSP. ,php, CGI) et cette "chose" peut retourner cette info. Bons exemples ici: http://www.developershome.com/wap/detection/detection.asp?page=readHeader

17
répondu Mihai Nita 2009-11-10 10:36:27

navigator.userLanguage pour IE

window.navigator.language pour firefox/opera/safari

14
répondu rink.attendant.6 2014-07-11 04:02:49

Javascript:

var language = window.navigator.userLanguage || window.navigator.language;//returns value like 'en-us'

si vous utilisez jQuery.i18n plugin , vous pouvez utiliser:

jQuery.i18n.browserLang();//returns value like '"en-US"'
7
répondu Jaskey 2015-04-02 09:45:35

Je ne trouve pas une seule référence qui indique que c'est possible sans impliquer le serverside.

MSDN on:

De browserLanguage:

Dans Microsoft Internet Explorer 4.0 et plus tôt, la propriété browserLanguage reflète la langue de l'installé interface utilisateur du navigateur. Exemple, si vous installez une version Japonaise de Windows Internet Explorer sur un Système d'exploitation anglais, browserLanguage serait ja.

dans Internet Explorer 5 et versions ultérieures, cependant, la propriété browserLanguage reflète la langue de l'exploitation quel que soit le système installé langue de la version de Internet Explorer. Cependant, si Microsoft Windows 2000 La version multilingue est installée, la propriété browserLanguage indique la langue définie dans l'exploitation les menus et dialogues actuels du système, comme dans les Options régionales du panneau. Par exemple, si vous installer une version japonaise D'Internet Explorer 5 sur un English (United Uni) système d'exploitation, browserLanguage serait en-gb. Si vous installer Windows 2000 MultiLanguage version et définir le la langue de la menus et dialogues en français, browserLanguage serait fr, Même bien que vous ayez une version japonaise de Internet Explorer.

Note Cette propriété n'indique pas la ou les langues définies par le utilisateur dans les préférences de langue, situé dans la boîte de dialogue Options Internet.

de plus, il semble que browserLanguage soit déprécié car IE8 ne l'a pas listé

6
répondu anddoutoi 2013-03-15 14:42:53

si vous développez une application / Extension Chrome utilisez le chrome.I18N API .

chrome.i18n.getAcceptLanguages(function(languages) {
  console.log(languages);
  // ["en-AU", "en", "en-US"]
});
6
répondu warrickh 2015-05-06 01:37:37

DanSingerman a une très bonne solution pour cette question.

la seule source fiable pour la langue est L'en-tête HTTP-request. Vous avez donc besoin d'un script côté serveur pour répondre à l'en-tête request ou au moins au champ Accept-Language .

voici un noeud très simple.js server qui devrait être compatible avec DanSingermans jQuery plugin.

var http = require('http');
http.createServer(function (req, res) {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end(JSON.stringify(req.headers));
}).listen(80,'0.0.0.0');
5
répondu skython 2011-11-05 08:39:56

pour ce que ça vaut, la Bibliothèque Universelle du sélecteur de langue de Wikimedia a des crochets pour faire ceci: https://www.mediawiki.org/wiki/Extension:UniversalLanguageSelector

voir la fonction getFrequentLanguageList dans resources/js/ext.uls.initialisation.js . Lien Direct: https://gerrit.wikimedia.org/r/gitweb?p=mediawiki/extensions/UniversalLanguageSelector.git;a=blob;f=resources/js/ext.uls.init.js;hb=tête

cela dépend toujours du serveur, ou plus spécifiquement, de L'API MediaWiki. La raison pour laquelle je le montre est qu'il peut fournir un bon exemple d'obtenir toutes les informations utiles sur la langue de l'utilisateur: la langue du navigateur, Accepter-langue, géolocalisation (avec obtenir des informations pays/langue de la CLDR), et, bien sûr, les préférences de l'utilisateur de son propre site.

5
répondu Amir E. Aharoni 2012-11-15 08:19:57

si vous n'avez besoin de prendre en charge que certains navigateurs modernes, vous pouvez maintenant utiliser:

navigator.languages

qui renvoie un tableau des préférences linguistiques de l'utilisateur dans l'ordre spécifié par l'utilisateur.

à partir de maintenant (sept. 2014) : Chrome (v37)), Firefox (v32) et Opera (v24)

mais pas sur: IE (v11)

5
répondu Mr Incredible 2014-09-19 15:05:46

j'ai eu le même problème, et j'ai écrit la bibliothèque front-end suivante seulement qui emballe le code pour plusieurs navigateurs. Ce n'est pas beaucoup de code, mais c'est bien de ne pas avoir à copier et coller le même code sur plusieurs sites web.

: acceptedlanguages.js

Utiliser:

<script src="acceptedlanguages.js"></script>
<script type="text/javascript">
  console.log('Accepted Languages:  ' + acceptedlanguages.accepted);
</script>

il renvoie toujours un tableau, commandé par la préférence des utilisateurs. Dans Safari & IE le tableau est toujours de longueur simple. En FF et Chrome, il peut s'agir de plusieurs langues.

5
répondu Leigh McCulloch 2015-07-21 13:52:54

je viens de trouver ça. Il combine une nouvelle syntaxe de déstructuration JS avec quelques opérations standard pour récupérer la langue et la localisation.

var [lang, locale] = (((navigator.userLanguage || navigator.language).replace('-', '_')).toLowerCase()).split('_');

Espère que cela aide quelqu'un

4
répondu MrMesees 2017-03-07 13:45:59

J'utilise la réponse de Hamid depuis un certain temps, mais dans les cas où le tableau de langues est comme ["en"," en-GB"," en-US"," fr-FR"," fr"," EN-ZA"] il retournera" en", quand" en-GB " serait une meilleure correspondance.

ma mise à jour (ci-dessous) retournera le premier code de format long par exemple" en-GB", sinon il retournera le premier code court par exemple" en", sinon il retournera null.

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

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

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

        return shortLanguage;
    }

console.log(getFirstBrowserLanguage());
4
répondu EamonnM 2017-10-01 16:07:09

la réponse de Dan Singerman a un problème que l'en-tête récupéré doit être utilisé immédiatement, en raison de la nature asynchrone de l'ajax de jQuery. Cependant, avec son serveur d'application google, j'ai écrit ce qui suit, de sorte que l'en-tête est défini dans le cadre de la configuration initiale et peut être utilisé à une date ultérieure.

<html>
<head>
<script>

    var bLocale='raw'; // can be used at any other place

    function processHeaders(headers){
        bLocale=headers['Accept-Language'];
        comma=bLocale.indexOf(',');
        if(comma>0) bLocale=bLocale.substring(0, comma);
    }

</script>

<script src="jquery-1.11.0.js"></script>

<script type="application/javascript" src="http://ajaxhttpheaders.appspot.com?callback=processHeaders"></script>

</head>
<body>

<h1 id="bLocale">Should be the browser locale here</h1>

</body>

<script>

    $("#bLocale").text(bLocale);

</script>
</html>
2
répondu user3097579 2014-06-17 04:04:24

tout d'Abord, excusez-moi pour mon anglais. Je voudrais partager mon code, parce qu'il fonctionne et il est différent des autres anwers donnés. Dans cet exemple, si vous parlez Français (France, Belgique ou autre langue française) vous êtes redirigé sur la page française, sinon sur la page anglaise, selon la configuration du navigateur:

<script type="text/javascript">
        $(document).ready(function () {
            var userLang = navigator.language || navigator.userLanguage;
            if (userLang.startsWith("fr")) {
                    window.location.href = '../fr/index.html';
                }
            else {
                    window.location.href = '../en/index.html';
                }
            });
    </script>
1
répondu Becca 2017-05-22 13:24:33

si vous avez le contrôle d'un backend et utilisez django, une implémentation en 4 lignes de L'idée de Dan est:

def get_browser_lang(request):
if request.META.has_key('HTTP_ACCEPT_LANGUAGE'):
    return JsonResponse({'response': request.META['HTTP_ACCEPT_LANGUAGE']})
else:
    return JsonResponse({'response': settings.DEFAULT_LANG})

puis en urls.py:

url(r'^browserlang/$', views.get_browser_lang, name='get_browser_lang'),

et à l'avant:

$.get(lg('SERVER') + 'browserlang/', function(data){
    var lang_code = data.response.split(',')[0].split(';')[0].split('-')[0];
});

(vous devez définir DEFAULT_LANG in settings.py bien sûr)

0
répondu Gobi Dasu 2014-10-15 06:53:38

basé sur la réponse ici accéder aux en-têtes HTTP de la page Web en JavaScript j'ai créé le script suivant pour obtenir le langage du navigateur:

var req = new XMLHttpRequest();
req.open('GET', document.location, false);
req.send(null);
var headers = req.getAllResponseHeaders().toLowerCase();
var contentLanguage = headers.match( /^content-language\:(.*)$/gm );
if(contentLanguage[0]) {
    return contentLanguage[0].split(":")[1].trim().toUpperCase();
}
0
répondu Andreas Jantschnig 2017-05-23 12:10:54

si vous ne voulez pas compter sur un serveur externe et que vous en avez un, vous pouvez utiliser un simple script PHP pour obtenir le même comportement que @DanSingerman answer.

languageDetector.php :

<?php
$lang = substr($_SERVER['HTTP_ACCEPT_LANGUAGE'], 0, 2);
echo json_encode($lang);
?>

et il suffit de changer cette ligne du script jQuery:

url: "languageDetector.php",
dataType: 'json',
success: function(language) {
    nowDoSomethingWithIt(language);
}
0
répondu Mijail 2015-02-23 13:45:01

si vous utilisez ASP .NET MVC et que vous voulez obtenir L'en-tête Accepted-Languages de JavaScript, voici un exemple de contournement qui n'implique aucune requête asynchrone.

dans votre .fichier cshtml, stocker l'en-tête en toute sécurité dans l'attribut de données d'un div:

<div data-languages="@Json.Encode(HttpContext.Current.Request.UserLanguages)"></div>

alors votre code JavaScript peut accéder à l'information, par exemple en utilisant JQuery:

<script type="text/javascript">
$('[data-languages]').each(function () {
    var languages = $(this).data("languages");
    for (var i = 0; i < languages.length; i++) {
        var regex = /[-;]/;
        console.log(languages[i].split(regex)[0]);
    }
});
</script>

bien sûr, vous pouvez utiliser un approche similaire avec d'autres technologies de serveur comme d'autres l'ont mentionné.

0
répondu Johan Franzén 2015-08-14 12:44:38

Pour qui sont à la recherche pour Java Server solution

Voici RestEasy

@GET
@Path("/preference-language")
@Consumes({"application/json", "application/xml"})
@Produces({"application/json", "application/xml"})
public Response getUserLanguagePreference(@Context HttpHeaders headers) {
    return Response.status(200)
            .entity(headers.getAcceptableLanguages().get(0))
            .build();
}
0
répondu vanduc1102 2015-12-22 04:02:54

j'ai eu une autre approche, cela peut aider quelqu'un dans le futur:

le client voulait une page où l'on peut échanger les langues. j'avais besoin de formater les numéros par ce paramètre (pas le paramètre du navigateur / pas par n'importe quel paramètre prédéfini)

j'ai donc défini un réglage initial en fonction des paramètres de configuration (i18n)

$clang = $this->Session->read('Config.language');
echo "<script type='text/javascript'>var clang = '$clang'</script>";

plus tard dans le script j'ai utilisé une fonction pour déterminer quel numberformating j'ai besoin

function getLangsettings(){
  if(typeof clang === 'undefined') clang = navigator.language;
  //console.log(clang);
  switch(clang){
    case 'de':
    case 'de-de':
        return {precision : 2, thousand : ".", decimal : ","}
    case 'en':
    case 'en-gb':
    default:
        return {precision : 2, thousand : ",", decimal : "."}
  }
}

j'ai donc utilisé la langue de la page et comme un secours, j'ai utilisé les paramètres du navigateur.

qui devrait également être utile pour les tests.

selon vos clients, vous pourriez ne pas avoir besoin de ces paramètres.

0
répondu Arthur Kielbasa 2016-03-21 11:22:15

j'ai un hack qui utilise très peu de code et qui est assez fiable.

placez les fichiers de votre site dans un sous-répertoire. SSL dans votre serveur et de créer des liens symboliques à ce sous-répertoire où vos fichiers sont stockés qui indiquent vos langues.

quelque chose comme ça:

ln -s /var/www/yourhtml /var/www/en
ln -s /var/www/yourhtml /var/www/sp
ln -s /var/www/yourhtml /var/www/it

utilisez votre serveur web pour lire HTTP_ACCEPT_LANGUAGE et rediriger vers ces "sous-répertoires différents" selon la valeur de la langue qu'il fournit.

Maintenant, vous pouvez utiliser la fenêtre Javascript.emplacement.href pour obtenir votre url et l'utiliser dans les conditionnels pour identifier de manière fiable la langue préférée.

url_string = window.location.href;
if (url_string = "http://yoursite.com/it/index.html") {
    document.getElementById("page-wrapper").className = "italian";
}
0
répondu user612161 2017-01-24 16:46:44