JavaScript для обнаружения предпочтений языка браузера [дубликат]
этот вопрос уже есть ответ здесь:
- получить язык посетителей и код страны с javascript (на стороне клиента) [дубликат] 3 ответы
- лучший способ определить языковой стандарт пользователя в браузере 6 ответов
Я пытался определить предпочтения языка браузера с помощью 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);
- https://developer.mozilla.org/en-US/docs/Web/API/NavigatorLanguage/languages
- https://developer.mozilla.org/en-US/docs/Web/API/NavigatorLanguage/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
путь 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
- навигатор.systemLanguage
- навигатор.userLanguage
из 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";
}