JavaScript для определения предпочтений браузера

Ответ 1

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

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

Я закодировал обходной путь: я выбил движок Google app script в 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);
    }
});

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

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

Изменить 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: Откройте исходный код кода приложения здесь: https://github.com/dansingerman/app-engine-headers

Ответ 2

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

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

navigator.language - это FireFox и все остальные браузеры.

Код языка: 'it'= italy, 'en-US'= english US и т.д.

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

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

Ответ 3

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

Теперь есть способ получить Accept-Languages ​​в Firefox и Chrome, используя navigator.languages ​​ (работает в Chrome >= 32 и Firefox >= 32)

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

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

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

Ответ 4

Я наткнулся на эту часть кода, чтобы обнаружить язык браузера в Angular Перевести модуль, в котором вы можете найти источник здесь. Я немного изменил код, заменив angular.isArray на Array.isArray, чтобы сделать его независимым от библиотеки 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());

Ответ 5

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

console.log(language);

Ответ 6

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

Ответ 7

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

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

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

Ответ 8

navigator.userLanguage для IE

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

Ответ 9

Способ Javascript:

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

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

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

Ответ 10

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

MSDN:

• навигатор browserLanguage
• навигатор systemLanguage
• навигатор userLanguage

От браузера:

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

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

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

Кроме того, похоже, что browserLanguage устарел, потому что IE8 не перечисляет его

Ответ 11

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

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

Ответ 12

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

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

Вот очень простой сервер Node.js, который должен быть совместим с плагином jSuery от 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');

Ответ 13

Для чего стоит библиотека Wikimedia Universal Language Selector имеет крючки для этого: https://www.mediawiki.org/wiki/Extension:UniversalLanguageSelector

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

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

Ответ 14

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

navigator.languages

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

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

Но не на: IE (v11)

Ответ 15

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

Получить его: acceptedlanguages.js

Используйте его:

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

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

Ответ 16

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

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

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

Ответ 17

Я использую ответ Хамида некоторое время, но он в тех случаях, когда массив языков похож на [ "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());

Ответ 18

Дэн Сингерман отвечает, что проблема с заголовком должна быть сразу использована из-за асинхронного характера jQuery ajax. Однако с его сервером приложений 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>

Ответ 19

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

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

Ответ 20

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

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, конечно)

Ответ 21

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

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

Ответ 22

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

languageDetector.php

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

И просто измените эти строки из jQuery script:

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

Ответ 23

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

В вашем файле .cshtml безопасно храните заголовок в атрибуте div data:

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

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

Ответ 24

Для тех, кто ищет решение Java Server

Здесь находится 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();
}

Ответ 25

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

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

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

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

позже в 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 : "."}
  }
}

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

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

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

Ответ 26

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

Поместите файлы своего сайта в подкаталог. 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 window.location.href, чтобы получить свой url и использовать его в условных выражениях для надежного определения предпочтительного языка.

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