web-dev-qa-db-ja.com

ブラウザの言語設定を検出するためのJavaScript

JavaScriptを使用してブラウザの言語設定を検出しようとしています。

ブラウザの言語をTools>Internet Options>General>LanguagesのIEに設定した場合、JavaScriptを使用してこの値をどのように読み取るのですか？

Firefoxでも同じ問題があります。 tools>options>content>languagesを使用してnavigator.languageの設定を検出できません。

navigator.userLanguageを使って、Start>ControlPanel>RegionalandLanguageOptions>Regional Optionsタブを通して行われた設定を検出します。

navigator.browserLanguageとnavigator.systemLanguageでテストしましたが、どちらも最初の設定の値を返しません（Tools>InternetOptions>General>Languages）

私は link を見つけました。これはこれを詳細に説明していますが、質問は未回答のままです:(

javascriptlocalizationinternationalization
402
Annibigi

ここでの主な問題は、ブラウザの設定が実際にはjavascriptを介して取得されるnavigator.languageプロパティに影響を及ぼさないということです。

それらが影響を与えるのはHTTPの 'Accept-Language'ヘッダですが、この値はjavascriptではまったく利用できないようです。 （おそらく@anddoutoiが、サーバサイドを含まないような参照を見つけることができないと述べているのは、おそらく理由です。）

私は回避策をコーディングしました： http://ajaxhttpheaders.appspot.com でGoogleアプリエンジンスクリプトをノックアップしました。これは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 __== "__main__":
    main()

Edit3：アプリエンジンのコードをここに公開しました： https://github.com/dansingerman/app-engine-headers

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

window.navigator.userLanguageはIEのみで、ブラウザの言語ではなくWindowsのコントロールパネル - 地域のオプションで設定されている言語ですが、ウィンドウの地域の設定がフランスに設定されているマシンを使用しているとしますおそらくフランス人のユーザーです。

navigator.languageはFireFoxと他のすべてのブラウザです。

いくつかの言語コード：'it' = italy、'en-US' = english USなど.

以下のコメントの rcoup および WebMacheter で指摘されているように、この回避策では、ユーザーがIE以外のブラウザでWebサイトを表示しているときに英語の方言を区別できません。

window.navigator.language（Chrome/FF/Safari）はブラウザの優先言語ではなく常にブラウザの言語を返しますが、「英語を話す人（gb、au、nzなど）がFirefox/Chromeのen-usバージョンを持つのは一般的です。 /サファリ。"そのため、ユーザーの希望する言語がwindow.navigator.languageであっても、en-USはen-GBを返します。

232
Marco Demaio

2014年の更新.

FirefoxおよびChromeでAccept-Languagesをnavigator.languagesを使用して取得する方法があります（Chrome> = 32およびFirefox> = 32で動作します）。

また、最近のFirefoxの navigator.language は、UIの言語ではなく、最も優先されるコンテンツの言語を反映しています。しかし、この概念は他のブラウザではまだサポートされていないので、あまり役に立ちません。

したがって、可能な限り最も好ましいコンテンツ言語を取得し、フォールバックとしてUI言語を使用するには、次のようにします。

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

Angular Translate module でブラウザの言語を検出するためのこのコードを見つけました。これはソース here を見つけることができます。 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());
49
Hamid
var language = navigator.languages && navigator.languages[0] || // Chrome / Firefox
               navigator.language ||   // All browsers
               navigator.userLanguage; // IE <= 10

console.log(language);

PWAテンプレートをお試しください https://github.com/StartPolymer/progressive-web-app-template

31
Josef Ježek
<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、IE 10+で動作します。

28
Kristian Williams

その設定を取得するための適切な方法はありません。少なくともブラウザから独立したものではありません。

しかし、サーバはその情報を持っています、なぜならそれは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

17
Mihai Nita

IEの場合はnavigator.userLanguage

firefox/opera/safariの場合はwindow.navigator.language

14
mitchbryson

私はしばらく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());
9
EamonnM

私は同じ問題を抱えていました、そして私は複数のブラウザのためにコードをまとめている以下のフロントエンド専用ライブラリを書きました。コードはそれほど多くはありませんが、複数のWebサイトに同じコードをコピーして貼り付ける必要がないのはいいことです。

それを入手してください： acceptablelanguages.js

これを使って：

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

常にユーザーの好みで配列された配列を返します。 Safari＆IEでは、配列は常にシングルレングスです。 FFとChromeでは、複数の言語になる可能性があります。

7
Leigh McCulloch

Javascriptの方法：

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

jQuery.i18n plugin を使用している場合は、次のように使用できます。

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

私はそれがサーバー側を巻き込まずに可能であると述べる単一の参照を見つけることができません。

上のMSDN：

BrowserLanguageから：

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はそれをリストしないからです

7
anddoutoi

Chrome App/Extensionを開発している場合は chrome.i18n API を使用してください。

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

私はちょうどこれを思い付きました。これは、言語とロケールを取得するために、新しいJSの構造化構文といくつかの標準的な操作を組み合わせたものです。

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

誰かに役立つことを願っています

6
MrMesees

それが価値があるもののために、ウィキメディアのユニバーサル言語セレクタライブラリはこれをするためのフックを持っています： 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から国/言語の情報を取得する）など、ユーザーの言語に関するすべての有用な情報を取得するための良い例です。ユーザー自身のサイト設定.

5
Amir E. Aharoni

最近の特定のブラウザのみをサポートする必要がある場合は、次のものを使用できます。

navigator.languages

これは、ユーザーが指定した順序でユーザーの言語設定の配列を返します。

現時点（2014年9月）現在、これはChrome（v37）、Firefox（v32）、およびOpera（v24）で動作しています。

しかし、そうではありません：IE（v11）

5
Mr Incredible

DanSingermanはこの質問に対して非常に優れた解決策を持っています。

この言語の唯一の信頼できるソースはHTTPリクエストヘッダにあります。そのため、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');
5
skython

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

まず第一に、私の英語をすみません。私は自分のコードを共有したいのですが、それはうまくいっていて、他のものとは異なります。この例では、フランス語（フランス、ベルギー、またはその他のフランス語）を話す場合、ブラウザの設定に応じてフランス語のページにリダイレクトされます。それ以外の場合は英語のページにリダイレクトされます。

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

バックエンドを制御していて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を設定する必要があります）

0
Gobi Dasu

もしあなたが外部のサーバーに頼らず、あなた自身のものを持っているのであれば、@ DanSingerman answerと同じ振る舞いをするために簡単なPHPスクリプトを使うことができます。

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

ここでの回答に基づいて JavaScriptでWebページの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();
}
0
Andreas Jantschnig

私は、ほんの少しのコードしか使用せず、非常に信頼性が高いと思うことをハックしています。

サイトのファイルをサブディレクトリに置きます。サーバーに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

Webサーバーを使用して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";
}
0
user612161

私は異なるアプローチをとっていました、これは将来誰かに役立つかもしれません：

顧客は、言語を交換できるページを望んでいました。私はその設定で番号をフォーマットする必要がありました（ブラウザの設定ではなく/定義済みの設定ではありません）

だから私は設定に応じて初期設定を設定する（国際化）

$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 : "."}
  }
}

だから私はページの設定言語を使い、フォールバックとしてブラウザの設定を使いました。

これはテスト目的にも役立つはずです。

あなたの顧客によってはあなたはその設定を必要としないかもしれません。

0
Arthur Kielbasa

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

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>

もちろん、他の人が述べたように、他のサーバーテクノロジでも同様のアプローチを使用できます。

0
Johan Franzén