Как показать элемент HTML только для определенного языка клиента? [Дубликат]

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

См. function 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) и, конечно же, пользовательские настройки сайта.

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

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

, поэтому я устанавливаю начальную настройку в зависимости от настроек конфигурации (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 : "."}
  }
}

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

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

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

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

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

На основании ответа здесь Доступ к 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();
}

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

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

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

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

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

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

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

Если вы управляете бэкэнд и используете 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 конечно)

Я нашел этот фрагмент кода, чтобы обнаружить язык браузера в модуле Angular Translate , который вы можете найти здесь здесь . Я слегка изменил код, заменив angular.isArray на Array.isArray, чтобы сделать его независимым от Angular library.

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

Способ Javascript:

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

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

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

Если вы используете ASP.NET MVC и хотите получить заголовок Accepted-Languages ​​из 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>

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

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

console.log(language);

• https://developer.mozilla.org/en-US/docs/Web/API/NavigatorLanguage/languages ​​
• https://developer.mozilla.org/en-US/docs/Web/API/NavigatorLanguage/language

Попробуйте шаблон PWA https://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 +.

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

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

Использовать его :

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

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

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 и т. д.) ), чтобы иметь en-us версию Firefox / Chrome / Safari. " Следовательно, window.navigator.language все равно вернет en-US, даже если пользователь предпочитает язык en-GB.

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

Но сервер имеет эту информацию, потому что он является частью заголовка 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

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

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

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

navigator.languages

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

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

Но не на: IE (v11)