it-swarm.com.de

JavaScript zur Erkennung der bevorzugten Browsersprache

Ich habe versucht, die bevorzugte Browsersprache mithilfe von JavaScript zu ermitteln.

Wie lese ich diesen Wert mit JavaScript, wenn ich die Browsersprache in IE in Tools>Internet Options>General>Languages einstelle?

Gleiches Problem für Firefox. Ich kann die Einstellung für tools>options>content>languages mit navigator.language nicht erkennen.

Mit navigator.userLanguage wird die Einstellung auf der Registerkarte Start>ControlPanel>RegionalandLanguageOptions>Regional Options ermittelt.

Ich habe mit navigator.browserLanguage und navigator.systemLanguage getestet, aber keiner gibt den Wert für die erste Einstellung zurück (Tools>InternetOptions>General>Languages)

Ich habe ein link gefunden, das dies ausführlich bespricht, aber die Frage bleibt unbeantwortet :(

412
Annibigi

Ich denke, das Hauptproblem hierbei ist, dass die Browsereinstellungen die Eigenschaft navigator.language, die über Javascript abgerufen wird, nicht tatsächlich beeinflussen.

Sie wirken sich auf den HTTP-Header "Accept-Language" aus, aber anscheinend ist dieser Wert über JavaScript überhaupt nicht verfügbar. (Wahrscheinlich, warum @anddoutoi angibt, dass er keine Referenz dafür finden kann, die nicht die Serverseite betrifft.)

Ich habe eine Problemumgehung programmiert: Ich habe ein Google App Engine-Skript unter http://ajaxhttpheaders.appspot.com aktiviert, das Ihnen das HTTP zurückgibt Header über JSONP anfordern.

(Hinweis: Dies ist ein Hack, der nur verwendet werden kann, wenn Ihnen kein Back-End zur Verfügung steht, das dies für Sie erledigt. Im Allgemeinen sollten Sie keine von Drittanbietern gehosteten Javascript-Dateien auf Ihren Seiten aufrufen, es sei denn, Sie haben ein sehr hohes Level Vertrauensniveau in den Host.)

Ich beabsichtige, es dort für immer zu belassen, also zögern Sie nicht, es in Ihrem Code zu verwenden.

Hier ist ein Beispielcode (in jQuery) für die Verwendung

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

Hoffe, jemand findet das nützlich.

Bearbeiten: Ich habe ein kleines jQuery-Plugin auf Github geschrieben, das diese Funktionalität umschließt: https://github.com/dansingerman/jQuery-Browser-Language

Edit 2: Wie hier angefordert ist der Code, der auf AppEngine läuft (wirklich super trivial):

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 __== "__main__":
    main()

Edit3: Habe den App-Engine-Code hier geöffnet: https://github.com/dansingerman/app-engine-headers

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

window.navigator.userLanguage ist nur IE und es ist die Sprache, die in Windows-Systemsteuerung - Ländereinstellungen und NICHT in der Browsersprache festgelegt wurde. Sie können jedoch annehmen, dass ein Benutzer einen Computer mit Windows verwendet Bei den auf Frankreich festgelegten regionalen Einstellungen handelt es sich wahrscheinlich um einen französischen Benutzer.

navigator.language ist FireFox und alle anderen Browser.

Einige Sprachcodes: 'it' = Italien, 'en-US' = Englisch US, etc.


Wie von rcoup und The WebMacheter in den Kommentaren unten ausgeführt, kann diese Problemumgehung angewendet werden Sie können nicht zwischen englischen Dialekten unterscheiden, wenn Benutzer Websites in anderen Browsern als dem IE anzeigen.

window.navigator.language (Chrome/FF/Safari) gibt immer die Browsersprache und nicht die bevorzugte Sprache des Browsers zurück habe eine en-us Version von Firefox/Chrome/Safari. " Daher gibt window.navigator.language auch dann en-US zurück, wenn die vom Benutzer bevorzugte Sprache en-GB ist.

240
Marco Demaio

Update des Jahres 2014.

Jetzt gibt es eine Möglichkeit, Accept-Languages ​​in Firefox und Chrome mit navigator.languages ( funktioniert in Chrome> = 32 und Firefox> = 32)

Außerdem gibt navigator.language in Firefox in diesen Jahren die bevorzugte Sprache des Inhalts wieder, nicht die Sprache der Benutzeroberfläche. Da dieser Begriff jedoch noch von anderen Browsern unterstützt werden muss, ist er nicht sehr nützlich.

So erhalten Sie nach Möglichkeit die bevorzugte Inhaltssprache und verwenden die Sprache der Benutzeroberfläche als Fallback:

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

Ich bin auf diesen Code gestoßen, um die Sprache des Browsers in Angular Translate-Modul zu erkennen. Dort finden Sie die Quelle hier . Ich habe den Code leicht modifiziert, indem ich angular.isArray durch Array.isArray ersetzt habe, um ihn unabhängig von der Angular-Bibliothek zu machen.

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());
50
Hamid Tavakoli
var language = navigator.languages && navigator.languages[0] || // Chrome / Firefox
               navigator.language ||   // All browsers
               navigator.userLanguage; // IE <= 10

console.log(language);

Versuchen Sie PWA Template https://github.com/StartPolymer/progressive-web-app-template

31
Josef Ježek
<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>

Ich brauchte nur die primäre Komponente für meine Bedürfnisse, aber Sie können ganz einfach die gesamte Zeichenfolge verwenden. Funktioniert mit den neuesten Versionen von Chrome, Firefox, Safari und IE10 +.

28

Es gibt keinen vernünftigen Weg, diese Einstellung zu erhalten, zumindest nicht etwas Browser-unabhängiges.

Der Server verfügt jedoch über diese Informationen, da sie Teil des HTTP-Anforderungsheaders sind (Feld "Accept-Language", siehe http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14). 4 )

Der einzig verlässliche Weg ist also, eine Antwort vom Server zu erhalten. Sie benötigen etwas, das auf dem Server ausgeführt wird (z. B. .asp, .jsp, .php, CGI), und dieses "Ding" kann diese Informationen zurückgeben. Gute Beispiele hier: http://www.developershome.com/wap/detection/detection.asp?page=readHeader

17
Mihai Nita

navigator.userLanguage für IE

window.navigator.language für Firefox/Oper/Safari

15
mitchbryson

Ich verwende Hamids Antwort seit einer Weile, aber in Fällen, in denen das Sprachenarray wie ["en", "en-GB", "en-US", "fr-FR", "fr", "en" ist -ZA "] es wird" en "zurückgegeben, wenn" en-GB "eine bessere Übereinstimmung wäre.

Mein Update (unten) gibt den ersten Langformatcode zurück, z. "en-GB", andernfalls wird der erste Kurzcode zurückgegeben, z. "en", sonst wird null zurückgegeben.

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());
14
EamonnM

Ich hatte das gleiche Problem und habe die folgende Front-End-Bibliothek geschrieben, die den Code für mehrere Browser zusammenfasst. Es ist nicht viel Code, aber schön, nicht denselben Code über mehrere Websites hinweg kopieren und einfügen zu müssen.

Holen Sie es sich: acceptlanguages.js

Benutze es:

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

Es wird immer ein Array zurückgegeben, das nach Benutzereinstellungen sortiert ist. In Safari & IE hat das Array immer eine einzelne Länge. In FF und Chrome kann es sich um mehrere Sprachen handeln.

7
Leigh McCulloch

Javascript Weg:

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

Wenn Sie jQuery.i18n plugin verwenden, können Sie Folgendes verwenden:

jQuery.i18n.browserLang();//returns value like '"en-US"'
7
Jaskey

Ich kann keinen einzigen Verweis finden, der besagt, dass dies möglich ist, ohne die Serverseite einzubeziehen.

MSDN am:

Aus browserLanguage:

In Microsoft Internet Explorer 4.0 und früheren Versionen spiegelt die browserLanguage-Eigenschaft die Sprache der Benutzeroberfläche des installierten Browsers wider. Wenn Sie beispielsweise eine japanische Version von Windows Internet Explorer auf einem englischen Betriebssystem installieren, lautet browserLanguage ja.

In Internet Explorer 5 und höher spiegelt die browserLanguage-Eigenschaft jedoch die Sprache des Betriebssystems wider, unabhängig von der installierten Sprachversion von Internet Explorer. Wenn jedoch die Microsoft Windows 2000 MultiLanguage-Version installiert ist, gibt die browserLanguage-Eigenschaft die Sprache an, die in den aktuellen Menüs und Dialogfeldern des Betriebssystems in den Ländereinstellungen der Systemsteuerung festgelegt ist. Wenn Sie beispielsweise eine japanische Version von Internet Explorer 5 auf einem englischen Betriebssystem (Vereinigtes Königreich) installieren, ist browserLanguage de-de. Wenn Sie die Windows 2000 MultiLanguage-Version installieren und die Sprache der Menüs und Dialogfelder auf Französisch einstellen, ist browserLanguage fr, obwohl Sie eine japanische Version von Internet Explorer haben.

Hinweis: Diese Eigenschaft gibt nicht die Sprache oder Sprachen an, die vom Benutzer in den Spracheinstellungen im Dialogfeld Internetoptionen festgelegt wurden.

Außerdem sieht es so aus, als ob browserLanguage veraltet ist, weil IE8 es nicht auflistet

7
anddoutoi

Wenn Sie eine Chrome App/Erweiterung entwickeln, verwenden Sie die chrome.i18n API .

chrome.i18n.getAcceptLanguages(function(languages) {
  console.log(languages);
  // ["en-AU", "en", "en-US"]
});
7
warrickh

Das habe ich mir gerade ausgedacht. Es kombiniert neuere JS-Destrukturierungssyntax mit einigen Standardoperationen, um die Sprache und das Gebietsschema abzurufen.

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

Hoffe es hilft jemandem

7
MrMesees

Für das, was es wert ist, hat die Universal Language Selector-Bibliothek von Wikimedia Haken dafür: https://www.mediawiki.org/wiki/Extension:UniversalLanguageSelector

Siehe die Funktion getFrequentLanguageList in resources/js/ext.uls.init.js. Direkter Link: https://gerrit.wikimedia.org/r/gitweb?p=mediawiki/extensions/UniversalLanguageSelector.git;a=blob;f=resources/js/ext.uls.init.js;hb = HEAD

Es hängt immer noch vom Server ab, genauer gesagt von der MediaWiki-API. Der Grund, warum ich es zeige, ist, dass es ein gutes Beispiel für das Abrufen aller nützlichen Informationen zur Benutzersprache sein kann: Browsersprache, Accept-Language, Geolocation (mit Abrufen von Länder-/Sprachinformationen von der CLDR) und natürlich Benutzereigene Site-Einstellungen.

6
Amir E. Aharoni

Wenn Sie nur bestimmte moderne Browser unterstützen müssen, können Sie jetzt Folgendes verwenden:

navigator.languages

hiermit wird ein Array der Spracheinstellungen des Benutzers in der vom Benutzer angegebenen Reihenfolge zurückgegeben.

Ab sofort (Sep 2014) funktioniert dies auf: Chrome (v37), Firefox (v32) und Opera (v24)

Aber nicht am: IE (v11)

6
Mr Incredible

DanSingerman hat eine sehr gute Lösung für diese Frage.

Die einzige zuverlässige Quelle für die Sprache ist der HTTP-Request-Header. Sie benötigen also ein serverseitiges Skript, um den Anforderungsheader oder zumindest das Feld Accept-Language an Sie zurückzusenden.

Hier ist ein sehr einfacher Node.js-Server, der mit dem jQuery-Plugin von DanSingermans kompatibel sein sollte.

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');
6
skython

Entschuldigen Sie mich zunächst für mein Englisch. Ich möchte meinen Code teilen, weil er funktioniert und anders ist als die anderen Antworten. In diesem Beispiel werden Sie, wenn Sie Französisch sprechen (Frankreich, Belgien oder eine andere französische Sprache), auf die französische Seite umgeleitet, ansonsten auf die englische Seite, abhängig von der Browserkonfiguration:

<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>
3
Becca

Dan Singermans Antwort weist ein Problem auf, dass der abgerufene Header sofort verwendet werden muss, da der Ajax von jQuery asynchron ist. Mit seinem Google App Server habe ich jedoch Folgendes geschrieben, sodass der Header als Teil der Ersteinrichtung festgelegt wird und zu einem späteren Zeitpunkt verwendet werden kann.

<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
user3097579

Wenn Sie die Kontrolle über ein Backend haben und Django verwenden, lautet eine vierzeilige Implementierung von Dans Idee:

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})

dann in urls.py:

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

und am vorderen Ende:

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

(Sie müssen DEFAULT_LANG in settings.py natürlich einstellen)

0
Gobi Dasu

Wenn Sie sich nicht auf einen externen Server verlassen möchten und über einen eigenen Server verfügen, können Sie ein einfaches PHP -Skript verwenden, um dasselbe Verhalten wie bei der @ DanSingerman-Antwort zu erzielen.

languageDetector.php:

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

Und ändern Sie einfach diese Zeilen aus dem jQuery-Skript:

url: "languageDetector.php",
dataType: 'json',
success: function(language) {
    nowDoSomethingWithIt(language);
}
0
Mijail

Basierend auf der Antwort hier Zugriff auf die HTTP-Header der Webseite in JavaScript Ich habe das folgende Skript erstellt, um die Browsersprache zu erhalten:

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

Ich habe einen Hack, der meiner Meinung nach sehr wenig Code verwendet und ziemlich zuverlässig ist.

Legen Sie die Dateien Ihrer Site in einem Unterverzeichnis ab. SSL auf Ihrem Server und erstellen Sie Symlinks zu dem Unterverzeichnis, in dem Ihre Dateien gespeichert sind, die Ihre Sprachen angeben.

Etwas wie das:

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

Verwenden Sie Ihren Webserver, um HTTP_ACCEPT_LANGUAGE zu lesen und zu diesen "verschiedenen Unterverzeichnissen" umzuleiten, je nach dem von ihm bereitgestellten Sprachwert.

Jetzt können Sie die window.location.href von Javascript verwenden, um Ihre URL abzurufen und sie unter bestimmten Bedingungen zu verwenden, um die bevorzugte Sprache zuverlässig zu identifizieren.

url_string = window.location.href;
if (url_string = "http://yoursite.com/it/index.html") {
    document.getElementById("page-wrapper").className = "italian";
}
0
user612161

ich hatte einen anderen Ansatz, dies könnte jemandem in der Zukunft helfen:

der Kunde wünschte sich eine Seite, auf der man Sprachen tauschen kann. Ich musste Zahlen mit dieser Einstellung formatieren (nicht mit der Browsereinstellung/nicht mit einer vordefinierten Einstellung)

also habe ich eine Anfangseinstellung in Abhängigkeit von den Konfigurationseinstellungen gesetzt (i18n)

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

später im Skript verwendete ich eine Funktion, um zu bestimmen, welche Zahlenformate ich benötige

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 : "."}
  }
}

also habe ich die eingestellte Sprache der Seite und als Fallback die Browsereinstellungen verwendet.

dies sollte auch zu Testzwecken hilfreich sein.

abhängig von Ihren Kunden benötigen Sie diese Einstellungen möglicherweise nicht.

0
Arthur Kielbasa

Für diejenigen, die nach einer Java Serverlösung suchen

Hier ist 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
vanduc1102

Wenn Sie ASP .NET MVC verwenden und den Header Accepted-Languages von JavaScript erhalten möchten, ist hier ein Workaround-Beispiel, das keine asynchronen Anforderungen enthält.

Speichern Sie den Header in Ihrer .cshtml-Datei sicher im Datenattribut eines Divs:

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

Dann kann Ihr JavaScript-Code auf die Informationen zugreifen, z. mit 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>

Natürlich können Sie einen ähnlichen Ansatz mit anderen Servertechnologien verwenden, wie andere bereits erwähnt haben.

0
Johan Franzén