JavaScript для обнаружения предпочтений языка браузера [дубликат]

этот вопрос уже есть ответ здесь:

Я пытался определить предпочтения языка браузера с помощью JavaScript.

если я установил язык браузера в IE в Tools>Internet Options>General>Languages, Как я могу прочитать это значение с помощью JavaScript?

та же проблема для Firefox. Я не могу обнаружить настройку для tools>options>content>languages С помощью navigator.language.

используя navigator.userLanguage, он обнаруживает настройку, выполненную через Start>ControlPanel>RegionalandLanguageOptions>Regional Options tab.

я протестировал с navigator.browserLanguage и navigator.systemLanguage но ни один не возвращает значение для первой настройки (Tools>InternetOptions>General>Languages)

нашел ссылке который подробно обсуждает это, но вопрос остается без ответа : (

26 ответов


Я думаю, что основная проблема здесь в том, что настройки браузера фактически не влияют на navigator.language свойство, полученное с помощью javascript.

на что они влияют, это заголовок HTTP 'Accept-Language', но, похоже, это значение вообще недоступно через javascript. (Вероятно, почему @anddoutoi заявляет, что он не может найти ссылку для него, которая не включает серверную сторону.)

я закодировал обходной путь: я обрюхатил скрипт Google app engine на http://ajaxhttpheaders.appspot.com это вернет вам заголовки HTTP-запросов через JSONP.

(Примечание: это хак только для использования, если у вас нет задней части доступны, которые могут сделать это для вас. В общем, вы не должны звонить сторонним файлам javascript, размещенным на ваших страницах, если у вас нет очень высокого уровня доверия к хосту.)

Я намерен оставить его там навсегда, поэтому не стесняйтесь использовать его в своем код.

вот пример кода (в jQuery) для того, как вы можете его использовать

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

надеюсь, кто-то найдет это полезным.

Edit: я написал небольшой плагин jQuery на github, который обертывает эту функциональность:https://github.com/dansingerman/jQuery-Browser-Language

Edit 2: по запросу вот код, который работает на AppEngine (супер тривиальный действительно):

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: имеют открытый исходный код App engine вот:https://github.com/dansingerman/app-engine-headers


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

window.navigator.userLanguage только IE, и это язык, установленный в Панель Управления Windows-Региональные Параметры и не язык браузера, но вы можете предположить, что пользователь, использующий машину с региональными настройками окна, установленными во Франции, вероятно, является французским пользователем.

navigator.language Это FireFox и все другие браузеры.

некоторый код языка:'it' = Италия, 'en-US' = английский, и т. д.


как указал rcoup и В WebMacheter в комментариях ниже этот обходной путь не позволит вам различать английские диалекты, когда пользователи просматривают веб-сайт в браузерах, отличных от IE.

window.navigator.language (Chrome/FF/Safari) всегда возвращает язык браузера, а не предпочтительный язык браузера, но: "это довольно распространено для носителей английского языка (gb, au, nz и т. д.), Чтобы иметь en-us версию Firefox/Chrome/Safari.- Отсюда! .. --5--> вернет en-US даже если предпочитаемый пользователем язык en-GB.


обновление 2014 год.

теперь есть способ получить Accept-Languages в Firefox и Chrome с помощью навигатор.языки (работает в Chrome >= 32 и Firefox >= 32)

и навигатор.язык в Firefox эти годы отражает наиболее предпочтительный язык контента, а не язык пользовательского интерфейса. Но поскольку это понятие еще не поддерживается другими браузерами, это не очень полезно.

Итак, чтобы получить наиболее предпочтительное содержание язык, когда это возможно, и использовать язык пользовательского интерфейса в качестве резервного:

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

я наткнулся на этот кусок кода, чтобы определить язык браузера в угловой модуль перевода, который вы можете найти источник здесь. Я немного изменил код, заменив угловые.параметры isarray с массива.isArray, чтобы сделать его независимым от угловой библиотеки.

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

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

console.log(language);

попробуйте шаблон PWAhttps://github.com/StartPolymer/progressive-web-app-template


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

Мне нужен был только основной компонент для моих нужд, но вы можете легко использовать полную строку. Работает с последними Chrome, Firefox, Safari и IE10+.


нет достойного способа получить эту настройку, по крайней мере, не что-то независимое от браузера.

но у сервера есть эта информация, потому что она является частью заголовка HTTP-запроса (поле Accept-Language, см. http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.4)

таким образом, единственный надежный способ-получить ответ от сервера. Вам понадобится что-то, что работает на сервере (как .гадюка. ,JSP-страница. ,php, CGI), и эта "вещь" может вернуть это информация. Хорошие примеры здесь:http://www.developershome.com/wap/detection/detection.asp?page=readHeader


navigator.userLanguage для IE

window.navigator.language для firefox/opera / safari


путь Javascript:

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

Если вы используете С помощью jQuery.плагин с названием i18n, вы можете использовать:

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

Я не могу найти ни одной ссылки, в которой говорится, что это возможно без участия serverside.

MSDN on:

из browserLanguage:

в Microsoft Internet Explorer 4.0 и ранее свойство browserLanguage отражает язык установленных пользовательский интерфейс браузера. Например, если вы устанавливаете японскую версию Windows Internet Explorer на Английская операционная система, browserLanguage будет ja.

в Internet Explorer 5 и выше, однако свойство browserLanguage отражает язык операционной система независимо от установленного языковая версия Internet Explorer. Однако, если Microsoft Windows 2000 Установленная версия мультиязычный , этот свойство browserLanguage указывает язык, заданный в операционной текущие меню и диалоговые окна системы, как найдено в региональных вариантах панель управления. Например, если вы установить японскую версию интернета Explorer 5 на английском языке (United Королевство) операционная система, browserLanguage будет en-gb. Если вы установка многоязычного языка Windows 2000 версия и установить язык меню и диалоги на французский язык, browserLanguage будет fr, даже если у вас есть Японская версия обозреватель Internet Explorer.

Примечание это свойство не указывает язык или языки, установленные пользователь в языковых настройках, расположенных в диалоговом окне Свойства обозревателя.

кроме того, это выглядит как browserLanguage осуждается причиной ИЕ8 не перечислить


Если вы разрабатываете приложение / расширение Chrome, используйте chrome.API с названием i18n.

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

DanSingerman имеет очень хорошее решение для этого вопроса.

единственный надежный источник для языка находится в заголовке HTTP-запроса. Таким образом, вам нужен серверный скрипт для ответа на заголовок запроса или, по крайней мере,Accept-Language поле обратно к вам.

вот очень простой узел.JS-сервер, который должен быть совместим с плагином jQuery dansingermans.

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

для чего это стоит, универсальная библиотека селектора языков Wikimedia имеет крючки для этого: https://www.mediawiki.org/wiki/Extension:UniversalLanguageSelector

см. функцию getFrequentLanguageList в resources/js / ext.Улс.в этом.js . Прямая ссылка: https://gerrit.wikimedia.org/r/gitweb?p=mediawiki/extensions/UniversalLanguageSelector.git;a=blob;f=resources/js/ext.uls.init.js;hb=HEAD

Это еще зависит от сервера, или более конкретно, API MediaWiki. Причина, по которой я показываю это, заключается в том, что это может служить хорошим примером получения всей полезной информации о языке пользователя: языке браузера, языке принятия, геолокации (с получением информации о стране/языке из CLDR) и, конечно же, собственных предпочтениях сайта пользователя.


Если вам нужно только поддерживать некоторые современные браузеры, то теперь вы можете использовать:

navigator.languages

который возвращает массив языковых предпочтений пользователя в порядке, указанном пользователем.

на данный момент (сентябрь 2014) это работает: Хром (v37), В Firefox (файле v32) и Opera (v24)

но не на: Т. е. (В11)


У меня была та же проблема, и я написал следующую интерфейсную библиотеку, которая завершает код для нескольких браузеров. Это не так много кода, но приятно не копировать и вставлять один и тот же код на нескольких веб-сайтах.

сделать это: acceptedlanguages.js

использовать:

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

Он всегда возвращает массив, упорядоченный по предпочтениям пользователей. В Safari & IE массив всегда имеет одну длину. В FF и Chrome может быть более одного язык.


Я просто придумал это. Он сочетает в себе более новый синтаксис деструктурирования JS с несколькими стандартными операциями для извлечения языка и локали.

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

надеюсь, это поможет кому-то


Я использую ответ Хамида некоторое время, но он в случаях, когда массив языков похож на ["en", "en-GB", "en-US", "fr-FR", "fr", "en-ZA"], он вернет "en", когда "en-GB" будет лучше соответствовать.

мое обновление (ниже) вернет первый код длинного формата, например "en-GB", в противном случае он вернет первый короткий код, например "en", в противном случае он вернет 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());

ответ Дэна Сингермана имеет проблему, которую заголовок должен быть использован сразу, из-за асинхронного характера ajax jQuery. Однако с его сервером приложений google я написал следующее, Так что заголовок устанавливается как часть начальной настройки и может использоваться позже.

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

прежде всего, извините за мой английский. Я хотел бы поделиться мой код, потому что он работает и он отличается от других даны ответы. В этом примере, если вы говорите по-французски (Франция, Бельгия или другой французский язык), вы перенаправляетесь на французскую страницу, в противном случае на английскую страницу, в зависимости от конфигурации браузера :

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

Если вы контролируете бэкэнд и используете django, 4-строчная реализация идеи Дэна:

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

затем в urls.py:

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

и на переднем конце:

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

(вы должны установить DEFAULT_LANG в settings.py конечно)


на основе ответа здесь доступ к HTTP-заголовкам веб-страницы в JavaScript Я построил следующий скрипт, чтобы получить язык браузера:

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

Если вы не хотите полагаться на внешний сервер, и у вас есть свой собственный, Вы можете использовать простой PHP-скрипт для достижения того же поведения, что и @DanSingerman answer.

languageDetector.в PHP:

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

и просто измените эти строки из сценария jQuery:

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

Если вы используете ASP .NET MVC, и вы хотите получить Принято-Языки заголовок из JavaScript, то вот пример обходного пути, который не включает в себя асинхронные запросы.

в вашей .cshtml-файл, надежно храните заголовок в атрибуте данных div:

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

тогда ваш код JavaScript может получить доступ к информации, например, с помощью 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>

конечно, вы можете использовать аналогичный подход с другими серверными технологиями, как другие упоминали.


для тех, кто ищет решение сервера Java

вот 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();
}

у меня был другой подход, это может помочь кому-то в будущем:

клиент хотел страницу, где вы можете поменять язык. мне нужно было отформатировать номера с помощью этой настройки (не настройки браузера / не какой-либо предопределенной настройки)

поэтому я установил начальную настройку в зависимости от настроек конфигурации (i18n)

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

позже в скрипте я использовал функцию, чтобы определить, какое число мне нужно

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

поэтому я использовал язык набора страница и в качестве запасного варианта я использовал настройки браузера.

что должно быть полезно для целей тестирования.

в зависимости от ваших клиентов вам могут не понадобиться эти настройки.


у меня есть хак, который я думаю, использует очень мало кода и вполне надежна.

поместить файлы вашего сайта в каталоге. SSL на ваш сервер и создайте символические ссылки на тот подкаталог, где хранятся ваши файлы, которые указывают ваши языки.

что-то вроде этого:

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

используйте свой веб-сервер для чтения HTTP_ACCEPT_LANGUAGE и перенаправления в эти "разные подкаталоги" в соответствии со значением языка, которое он предоставляет.

теперь вы можете используйте окно Javascript.местоположение.href, чтобы получить url-адрес и использовать его в условных обозначениях для надежного определения предпочтительного языка.

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