【js】ブラウザの言語設定により表示する文字を切り替える
Javascriptを利用してブラウザで設定されている言語を取得し、言語によって表示を切り替える方法をまとめます。
Javascriptでブラウザの言語設定を取得する方法は、使用するブラウザによって異なります。
これは以下の記事を参考にしました。
https://easyramble.com/get-language-setting-by-javascript.html
方法としてはonloadでブラウザの言語設定を取得して、あらかじめ2パターン用意した記述の片方を非表示にします。
実装
ブラウザの言語設定取得
language_test.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Laungage Test</title>
<style type="text/css">
<!--
#body {
margin-left: 1em;
margin-right: 1em;
}
-->
</style>
<script>
window.onload = function() {
var language;
if (navigator.browserLanguage != null) {
// Internet Explorer, Opera, 他
language = navigator.browserLanguage.substr(0, 2);
} else if(navigator.userLanguage != null) {
// Internet Explorerの場合
language = navigator.userLanguage.substr(0, 2);
} else if(navigator.language != null) {
// Chrome, Firefox, Opera, 他
language = navigator.language.substr(0, 2);
} else {
// その他
language = "en";
}
setLanguage(language);
}
function setLanguage(language){
var element = document.getElementsByClassName("langageClass");
for (var i = 0; i < element.length; i++) {
if(element[i].getAttribute("lang") == language){
element[i].style.display = "";
}
else{
element[i].style.display = "none";
}
}
}
</script>
</head>
<body>
<div id="body">
<h1>
<p class="langageClass" lang="en">English</p>
<p class="langageClass" lang="ja">日本語</p>
</a>
</h3>
</div>
</a>
</body>
</html>
Navigatorオブジェクトにブラウザの情報が入ってますのでここから言語情報を取得します。ただし使用中のブラウザによって取得方法が異なります。
| 対象ブラウザ | 言語情報が格納されている変数 |
|---|---|
| IE, Opera | navigator.browserLanguage |
| IE | navigator.userLanguage |
| Chrome, Firefox, Opera | navigator.language |
また、言語コードの取得でsubstr(0, 2)しているのは言語コードと国コードのセットが入っていることがあるためです。en-US のような形で取得されるケースがあります。
ここで取得した言語コードを属性に持つエレメントを、lunguageClassクラスの中から探して表示/非表示を制御しています。
動作確認
ブラウザで開く
ブラウザの言語を英語で見たとき
※Google Chromeの場合、[設定] → [詳細設定] → [言語]でブラウザの言語を切り替えることが出来ます。
コメント
コメントを投稿