브라우저 언어 기본 설정을 감지하기위한 JavaScript
이 질문에는 이미 답변이 있습니다.
JavaScript를 사용하여 브라우저 언어 환경 설정을 감지하려고했습니다.
에서 IE에서 브라우저 언어를 설정하면 Tools>Internet Options>General>Languages
JavaScript를 사용하여이 값을 어떻게 읽습니까?
Firefox와 동일한 문제입니다. tools>options>content>languages
사용 설정을 감지 할 수 없습니다 navigator.language
.
를 사용하여 탭을 navigator.userLanguage
통해 수행 된 설정을 감지합니다 Start>ControlPanel>RegionalandLanguageOptions>Regional Options
.
내가 테스트 한 navigator.browserLanguage
하고 navigator.systemLanguage
있지만, 어느 반환 첫번째 설정 값 ( Tools>InternetOptions>General>Languages
)
이에 대해 자세히 설명 하는 링크 를 찾았 지만 질문에 대답하지 않았습니다.
여기서 주요 문제는 브라우저 설정이 실제로 navigator.language
자바 스크립트를 통해 얻은 속성에 영향을 미치지 않는다는 것 입니다.
그들이 영향을 미치는 것은 HTTP 'Accept-Language'헤더이지만, 자바 스크립트를 통해이 값을 전혀 사용할 수없는 것으로 보입니다. (아마도 @anddoutoi가 서버 측과 관련이없는 참조를 찾을 수 없다고 말한 이유 일 것입니다.)
나는 해결 방법을 코딩 한 : 나는에 구글 앱 엔진 스크립트까지 기절 한 http://ajaxhttpheaders.appspot.com JSONP를 통해 당신에게 HTTP 요청 헤더를 반환합니다.
(참고 : 백엔드가없는 경우에만 사용할 수있는 해킹입니다. 일반적으로 매우 높은 수준이 아닌 경우 페이지에서 타사 호스팅 자바 스크립트 파일을 호출해서는 안됩니다. 호스트에 대한 신뢰 수준.)
나는 그것을 영구적으로 남겨 두려고하므로 코드에서 자유롭게 사용하십시오.
사용 방법에 대한 예제 코드 (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
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를 사용하는 것이 일반적입니다." 따라서 사용자가 선호하는 언어가 인 경우에도 window.navigator.language
여전히 반환 en-US
됩니다 en-GB
.
2014 년 업데이트
이제 navigator.languages를 사용하여 Firefox 및 Chrome에서 Accept-Languages를 얻는 방법이 있습니다 (Chrome> = 32 및 Firefox> = 32에서 작동)
또한 Firefox의 navigator.language 는 최근 UI 언어가 아닌 가장 선호하는 콘텐츠 언어를 반영합니다. 그러나이 개념은 아직 다른 브라우저에서 지원되지 않으므로 그다지 유용하지 않습니다.
따라서 가능한 경우 가장 선호하는 콘텐츠 언어를 얻으려면 UI 언어를 폴백으로 사용하십시오.
navigator.languages
? navigator.languages[0]
: (navigator.language || navigator.userLanguage)
Angular Translate 모듈 에서 브라우저 언어를 감지하기 위해이 코드를 발견 했습니다 . 여기 에서 소스를 찾을 수 있습니다 . Angular 라이브러리와 독립적으로 angular.isArray를 Array.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
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 +에서 작동합니다.
적어도 브라우저 독립적이지 않은 설정을 얻는 적절한 방법은 없습니다.
그러나 서버는 HTTP 요청 헤더의 일부이므로 서버에 해당 정보가 있습니다 (Accept-Language 필드, http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.4 참조 )
따라서 신뢰할 수있는 유일한 방법은 서버에서 응답을받는 것입니다. 서버에서 실행되는 무언가 (예 : .asp, .jsp, .php, CGI)가 필요하며 "thing"은 해당 정보를 리턴 할 수 있습니다. 좋은 예는 다음과 같습니다. http://www.developershome.com/wap/detection/detection.asp?page=readHeader
navigator.userLanguage
IE 용
window.navigator.language
파이어 폭스 / 오페라 / 사파리
한동안 Hamid의 답변을 사용했지만 언어 배열이 [ "en", "en-GB", "en-US", "fr-FR", "fr", "en과 같은 경우 -ZA "]"en-GB "가 더 적합 할 때"en "을 반환합니다.
내 업데이트 (아래)는 첫 번째 긴 형식 코드 (예 : "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());
나는 이것을 생각해 냈습니다. 최신 JS 파괴 구문과 몇 가지 표준 작업을 결합하여 언어와 로캘을 검색합니다.
var [lang, locale] = (((navigator.userLanguage || navigator.language).replace('-', '_')).toLowerCase()).split('_');
누군가에게 도움이되기를 바랍니다.
서버 측을 포함하지 않고 가능하다는 단일 참조를 찾을 수 없습니다.
MSDN :
브라우저에서
Microsoft Internet Explorer 4.0 및 이전 버전에서 browserLanguage 속성은 설치된 브라우저 사용자 인터페이스의 언어를 반영합니다. 예를 들어 영어 운영 체제에 일본어 버전의 Windows Internet Explorer를 설치하는 경우 browserLanguage는 ja입니다.
그러나 Internet Explorer 5 이상에서 browserLanguage 속성은 설치된 언어 버전의 Internet Explorer에 관계없이 운영 체제의 언어를 반영합니다. 그러나 Microsoft Windows 2000 MultiLanguage 버전이 설치된 경우 browserLanguage 속성은 제어판의 국가 별 옵션에있는 운영 체제의 현재 메뉴 및 대화 상자에 설정된 언어를 나타냅니다. 예를 들어 영어 (영국) 운영 체제에 일본어 버전의 Internet Explorer 5를 설치하면 browserLanguage는 en-gb가됩니다. Windows 2000 MultiLanguage 버전을 설치하고 메뉴 및 대화 상자의 언어를 프랑스어로 설정하면 일본어 버전의 Internet Explorer가 있어도 browserLanguage는 fr입니다.
참고이 속성은 인터넷 옵션 대화 상자의 언어 기본 설정에서 사용자가 설정 한 언어를 나타내지 않습니다.
또한 browserLanguage
IE8이 목록을 표시하지 않기 때문에 더 이상 사용되지 않는 것 같습니다.
자바 스크립트 방식 :
var language = window.navigator.userLanguage || window.navigator.language;//returns value like 'en-us'
jQuery.i18n plugin을 사용하는 경우 다음을 사용할 수 있습니다.
jQuery.i18n.browserLang();//returns value like '"en-US"'
Chrome 앱 / 확장 프로그램을 개발하는 경우 chrome.i18n API를 사용하십시오 .
chrome.i18n.getAcceptLanguages(function(languages) {
console.log(languages);
// ["en-AU", "en", "en-US"]
});
나는 같은 문제를 겪었고 여러 브라우저의 코드를 마무리하는 다음 프론트 엔드 전용 라이브러리를 작성했습니다. 코드가 많지는 않지만 여러 웹 사이트에서 동일한 코드를 복사하여 붙여 넣을 필요가 없습니다.
그걸 써:
<script src="acceptedlanguages.js"></script>
<script type="text/javascript">
console.log('Accepted Languages: ' + acceptedlanguages.accepted);
</script>
항상 사용자 기본 설정에 따라 정렬 된 배열을 반환합니다. Safari & IE에서 배열은 항상 단일 길이입니다. FF 및 Chrome에서는 둘 이상의 언어 일 수 있습니다.
DanSingerman은이 질문에 대한 아주 좋은 해결책을 가지고 있습니다.
신뢰할 수있는 언어 소스는 HTTP 요청 헤더에 있습니다. 따라서 요청 헤더 또는 적어도 Accept-Language
필드 를 회신하기 위해 서버 측 스크립트가 필요 합니다.
DanSingermans jQuery 플러그인과 호환되어야하는 매우 간단한 Node.js 서버가 있습니다.
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의 Universal Language Selector 라이브러리는 이것을 수행하기위한 후크를 가지고 있습니다 : https://www.mediawiki.org/wiki/Extension:UniversalLanguageSelector
resources / js / ext.uls.init.js의 getFrequentLanguageList 함수를 참조하십시오. 직접 링크 : 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에서 국가 / 언어 정보 가져 오기) 및 사용자 언어에 대한 유용한 정보를 모두 얻는 좋은 예를 제공 할 수 있기 때문입니다. 사용자 자신의 사이트 환경 설정.
특정 최신 브라우저 만 지원해야하는 경우 이제 다음을 사용할 수 있습니다.
navigator.languages
사용자가 지정한 순서대로 사용자의 언어 기본 설정 배열을 반환합니다.
현재 (2014 년 9 월) Chrome (v37), Firefox (v32) 및 Opera (v24)에서 작동합니다.
그러나 : IE (v11)
우선, 영어 실력을 실례합니다. 코드가 작동하고 다른 코드와 다르기 때문에 코드를 공유하고 싶습니다. 이 예에서 프랑스어 (프랑스, 벨기에 또는 기타 프랑스어)를 사용하면 브라우저 구성에 따라 프랑스어 페이지로, 그렇지 않으면 영어 페이지로 리디렉션됩니다.
<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>
Dan Singerman의 대답에는 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를 사용하는 경우 Dan의 아이디어를 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];
});
(물론 settings.py에서 DEFAULT_LANG을 설정해야합니다)
여기에 대한 답변을 기반으로 JavaScript로 웹 페이지의 HTTP 헤더에 액세스 하면 브라우저 언어를 얻기 위해 다음 스크립트를 작성했습니다.
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 답변과 동일한 동작을 수행 할 수 있습니다.
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에서 Accepted-Languages 헤더 를 가져 오려면 비동기 요청과 관련이없는 해결 방법 예제가 있습니다.
.cshtml 파일에서 헤더를 div의 data-attribute에 안전하게 저장하십시오.
<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 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();
}
나는 다른 접근 방식을 가지고 있었고, 이것은 미래에 누군가를 도울 수 있습니다.
고객이 언어를 바꿀 수있는 페이지를 원했습니다. 그 설정에 따라 숫자를 포맷해야했습니다 (브라우저 설정이 아닌 / 사전 정의 된 설정이 아닌)
구성 설정 (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의 window.location.href를 사용하여 URL을 가져 와서 조건부에서 사용하여 선호하는 언어를 안정적으로 식별 할 수 있습니다.
url_string = window.location.href;
if (url_string = "http://yoursite.com/it/index.html") {
document.getElementById("page-wrapper").className = "italian";
}
참고 URL : https://stackoverflow.com/questions/1043339/javascript-for-detecting-browser-language-preference
'Programing' 카테고리의 다른 글
유휴 연결 중단 시간 재시도 (0) | 2020.02.20 |
---|---|
Set을 Array로 변환하는 방법? (0) | 2020.02.20 |
나뭇 가지에 끈을 연결하는 방법 (0) | 2020.02.20 |
SDK 'iOS 10.0'의 제품 유형 'Application'에 코드 서명이 필요합니다-StickerPackExtension에는 개발 팀 오류가 필요합니다 (0) | 2020.02.20 |
^ M을 무시하는 git-diff (0) | 2020.02.20 |