브라우저 언어 기본 설정을 감지하기 위한 JavaScript
JavaScript를 사용하여 브라우저 언어 기본 설정을 검출하려고 합니다.
IE에서 언어를 IE로 설정합니다.Tools>Internet Options>General>Languages자바스크립트?
파이어폭스.을 알 수tools>options>content>languages를 사용합니다.navigator.language.
「」를 사용합니다.navigator.userLanguage 、 를 、 를 、 done done done done done done done done done done 설정을 Start>ControlPanel>RegionalandLanguageOptions>Regional Options으로 이동합니다
로 테스트했습니다.navigator.browserLanguage ★★★★★★★★★★★★★★★★★」navigator.systemLanguage 둘 다 첫 설정예: , but, 다다다 but(((((((((((((((((((((()을 반환하지 않습니다.Tools>InternetOptions>General>Languages)
이에 대해 자세히 설명하는 링크를 찾았지만, 질문은 아직 답변되지 않았습니다.
큰의 설정이 실제로 입니다.navigator.languagejavascriptjavascript를 .
이 값이 영향을 미치는 것은 HTTP의 Accept-Language 헤더입니다만, 이 값은 javascript에서는 전혀 사용할 수 없는 것 같습니다(@anddoutoi가 서버측과 관계없는 참조를 찾을 수 없는 이유일 가능성이 있습니다).
회피책을 코드화했습니다.JSONP를 통해 HTTP 요청 헤더를 반환하는 구글 앱 엔진 스크립트를 http://ajaxhttpheaders.appspot.com에서 준비했습니다.
(주의: 이 기능은 이용 가능한 백엔드가 없는 경우에만 사용할 수 있는 해킹입니다.일반적으로 호스트에 대한 신뢰도가 매우 높지 않으면 페이지에 있는 서드파티 호스팅된 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()
편집 3: 오픈 소스 앱 엔진 코드는 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 제어판 - 지역 옵션 및 브라우저 언어가 아닌 언어로 설정되어 있습니다.단, Windows 지역 설정이 프랑스로 설정된 머신을 사용하는 사용자는 아마도 프랑스 사용자라고 가정할 수 있습니다.
navigator.language파이어폭스.
언어 코드: 부부 some언 some some some some:'it', =이탈리아,'en-US'=영어영어
아래 댓글에서 rcoup과 The WebMachester가 지적한 바와 같이 사용자가 IE 이외의 브라우저에서 웹 사이트를 볼 때 이 회피책으로 영어 사투리를 구분할 수 없습니다.
window.navigator.language(Chrome/FF/Safari)는 브라우저가 선호하는 언어가 아니라 항상 브라우저 언어를 반환하지만, "영어 스피커(gb, au, nz 등)가 Firefox/Chrome/Safari의 en-us 버전을 사용하는 것은 매우 일반적입니다." 때문에, 「 」는 할 수 없습니다.window.navigator.language en-US가 """인 en-GB.
2014년 업데이트.
이제 navigator.language를 사용하여 Firefox 및 Chrome에서 Accept-Language를 가져오는 방법이 있습니다(Chrome >= 32 및 Firefox >= 32에서 작동).
또한 최근 Firefox의 navigator.language에는 UI 언어가 아닌 콘텐츠 언어가 가장 선호됩니다.그러나 이 개념은 다른 브라우저에서는 아직 지원되지 않기 때문에 그다지 유용하지 않습니다.
따라서 가능한 한 가장 선호하는 콘텐츠 언어를 가져와 UI 언어를 폴백으로 사용하려면 다음과 같이 하십시오.
navigator.languages
? navigator.languages[0]
: (navigator.language || navigator.userLanguage)
Angular Translate 모듈에서 브라우저 언어를 검출하기 위해 이 코드를 발견했습니다.여기서 소스를 찾을 수 있습니다.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());let lang = window.navigator.languages ? window.navigator.languages[0] : null;
lang = lang || window.navigator.language || window.navigator.browserLanguage || window.navigator.userLanguage;
let shortLang = lang;
if (shortLang.indexOf('-') !== -1)
shortLang = shortLang.split('-')[0];
if (shortLang.indexOf('_') !== -1)
shortLang = shortLang.split('_')[0];
console.log(lang, shortLang);필요한 것은 프라이머리 컴포넌트뿐이었지만, 모든 스트링을 쉽게 사용할 수 있습니다.최신 Chrome, Firefox, Safari 및 IE10+에서 작동합니다.
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
navigator.userLanguage의 경우
window.navigator.languagefirefox/firefox/firefox/firefox/firefox/firefox/firefox/
아까부터 Hamid의 답변을 사용하고 있습니다만, 언어 배열이 [en], [en-GB], [en-US], [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]];
//skip this loop iteration if property is null/undefined. IE11 fix.
if (language == null) { continue; }
len = language.length;
if (!shortLanguage && len) {
shortLanguage = language;
}
if (language && len > 2) {
return language;
}
}
return shortLanguage;
}
console.log(getFirstBrowserLanguage());업데이트: IE11에서 일부 속성이 정의되지 않았을 때 오류가 발생했습니다.해당 속성을 건너뛸 수 있는 체크가 추가되었습니다.
적어도 브라우저에 의존하지 않는 설정을 얻을 수 있는 적절한 방법은 없습니다.
단, 서버는 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
방금 생각해낸 거예요.새로운 JS 파괴 구문을 몇 가지 표준 조작과 결합하여 언어와 로케일을 가져옵니다.
var [lang, locale] = (
(
(
navigator.userLanguage || navigator.language
).replace(
'-', '_'
)
).toLowerCase()
).split('_');
도움이 되었으면 좋겠다
저도 같은 문제가 있어서 여러 브라우저의 코드를 정리한 프런트 엔드 전용 라이브러리를 작성했습니다.많은 코드는 아니지만 여러 웹 사이트에 동일한 코드를 복사하여 붙여넣을 필요가 없어 좋습니다.
사용방법:
<script src="acceptedlanguages.js"></script>
<script type="text/javascript">
console.log('Accepted Languages: ' + acceptedlanguages.accepted);
</script>
항상 사용자 기본 설정에 따라 배열이 반환됩니다.Safari 및 IE에서는 어레이는 항상 단일 길이입니다.FF 및 Chrome에서는 여러 언어를 사용할 수 있습니다.
제 코드를 공유하고 싶습니다. 왜냐하면 그것은 작동하며 다른 응답자들과 다르기 때문입니다.이 예에서는 프랑스어(프랑스어, 벨기에어 또는 기타 프랑스어)를 사용하는 경우 브라우저 설정에 따라 프랑스어 페이지로 리다이렉트됩니다.
<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>서버사이드와 관련되지 않고서는 그것이 가능하다는 것을 나타내는 레퍼런스를 찾을 수 없습니다.
MSDN 온:
브라우저 언어:
Microsoft Internet Explorer 4.0 이전 버전에서는 browserLanguage 속성은 설치된 브라우저의 사용자 인터페이스 언어를 반영합니다.예를 들어 영어 운영 체제에 일본어 버전의 Windows Internet Explorer를 설치하는 경우 browserLanguage는 ja가 됩니다.
그러나 Internet Explorer 5 이후에서는 설치되어 있는 Internet Explorer 언어 버전에 관계없이 browserLanguage 속성은 운영 체제의 언어를 반영합니다.그러나 Microsoft Windows 2000 MultiLanguage 버전이 설치되어 있는 경우 browserLanguage 속성은 제어판의 [지역 옵션]에 있는 운영 체제의 현재 메뉴 및 대화 상자에 설정된 언어를 나타냅니다.예를 들어 영어(영국) 운영 체제에 일본어 버전의 Internet Explorer 5를 설치하는 경우 browserLanguage는 en-gb가 됩니다.Windows 2000 MultiLanguage 버전을 설치하고 메뉴 및 대화 상자의 언어를 프랑스어로 설정하면 Internet Explorer 일본어 버전을 사용하는 경우에도 browserLanguage는 fr이 됩니다.
주 이 속성은 [인터넷 옵션] 대화상자에 있는 [언어 환경설정]에서 사용자가 설정한 언어를 나타내지 않습니다.
그것은 '하다', '하다', '하다', '하다', ''처럼 보인다.browserLanguageIE8에 의한 것입니다.
특정 최신 브라우저만 지원하면 다음 기능을 사용할 수 있습니다.
navigator.languages
사용자가 지정한 순서대로 사용자의 언어 기본 설정 배열을 반환합니다.
현재(2014년 9월) 이 기능은 Chrome(v37), Firefox(v32), Opera(v24)에서 작동합니다.
단, 켜지지 않음: IE(v11)
Javascript 방법:
var language = window.navigator.userLanguage || window.navigator.language;//returns value like 'en-us'
jQuery.i18n 플러그인을 사용하는 경우 다음을 사용할 수 있습니다.
jQuery.i18n.browserLang();//returns value like '"en-US"'
Chrome App/Extension을 개발하는 경우 chrome.i18n API를 사용합니다.
chrome.i18n.getAcceptLanguages(function(languages) {
console.log(languages);
// ["en-AU", "en", "en-US"]
});
Dan Singerman은 이 질문에 대해 매우 좋은 해결책을 가지고 있습니다.
HTTP-request를 지정한다. request-header에 합니다.★★★★★★★★★★★★★★★★,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/ext.uls.init.http://https://gerrit.wikimedia.org/r/gitweb?p=mediawiki/extensions/UniversalLanguageSelector.git;a=blob;f=resources/js/ext.uls.init.js;hb=HEAD 에서 getFrequentLanguageList 함수를 참조하십시오.
서버, 구체적으로는 MediaWiki API에 따라 달라집니다.그 이유는 브라우저 언어, Accept-Language, Geolocation(CLDR에서 국가/언어 정보 가져오기) 및 사용자 자신의 사이트 기본 설정 등 사용자의 언어에 대한 모든 유용한 정보를 얻을 수 있는 좋은 예가 될 수 있기 때문입니다.
Dan Singerman의 답변에는 jQuery의 Ajax의 비동기 특성 때문에 가져온 헤더를 즉시 사용해야 하는 문제가 있습니다.다만, 그의 구글 앱 서버에서는, 초기 셋업의 일부로서 헤더를 설정해, 나중에 사용할 수 있도록, 이하를 기입했습니다.
<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>
외부 서버에 의존하지 않고 자신의 서버를 가지고 있다면 간단한 PHP 스크립트를 사용하여 @DanSingerman answer와 같은 동작을 할 수 있습니다.
언어 검출기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);
}
백엔드를 제어하고 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})
url로 지정합니다.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을 설정해야 합니다.)
자바스크립트에서 웹 페이지의 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();
}
ASP 를 사용하고 있는 경우.NET MVC에서 JavaScript에서 Accepted-Languages 헤더를 가져오고 싶은 경우 비동기 요구를 포함하지 않는 회피책의 예를 다음에 나타냅니다.
.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 Server 솔루션을 찾고 있는 고객
Rest Easy는 이쪽
@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
'sourcecode' 카테고리의 다른 글
| 방금 발생한 MySQL 경고를 표시하려면 어떻게 해야 합니까? (0) | 2023.01.20 |
|---|---|
| MySQL 서브쿼리에서 GROUP_CONCAT 사용 (0) | 2023.01.20 |
| 특정 범위의 JavaScript에서 임의의 정수 생성 (0) | 2023.01.20 |
| mysql 함수에서 영숫자 텍스트에서 선행 0을 잘라내는 방법 (0) | 2023.01.20 |
| MySql/MariaDB는 Debian 9.1 서버의 기본 데이터 주소를 변경할 수 없습니다. (0) | 2023.01.20 |