브라우저 언어에 따라 표시
웹 서핑을 하다보면 브라우저 언어에따라 홈페이지에서 출력되는 언어가 다른 사이트들이 있다.
JavaScript를 이용하여 언어를 다르게 출력하는 방법을 한 번 알아보자.
파일 생성
원하는 방식을 선택한 후 코드를 확인해보자.
로컬 사용 가능 ▸ 언어파일과 구동파일 합친 버전
JavaScript 파일
document.addEventListener('DOMContentLoaded', async () => {
try {
const response = await fetch('langResource.json');
if (!response.ok) {
throw new Error('언어 리소스를 불러오는데 실패했습니다.');
}
const langResource = await response.json();
const browserLang = navigator.language.slice(0,2);
const htmlLang = document.documentElement.getAttribute('lang') || browserLang;
const lang = ['ko', 'en', 'jp', 'cn'].includes(htmlLang) ? htmlLang : 'en';
const resources = langResource[lang];
document.title = resources.title;
const classBasedKeys = new Set(['classname1', 'classname2']);
Object.entries(resources).forEach(([key, value]) => {
if (key === 'title') return;
if(classBasedKeys.has(key)) {
const elements = document.querySelectorAll(`.${key}`);
if(elements.length > 0) {
elements.forEach(el => {
el.style.opacity = 0;
setTimeout(() => {
el.textContent = value;
el.style.opacity = 1;
}, 200);
});
} else {
console.warn(`⚠️ Class element not present: .${key}`);
}
} else {
const element = document.getElementById(key);
if(element) {
element.style.opacity = 0;
setTimeout(() => {
element.textContent = value;
element.style.opacity = 1;
}, 200);
} else {
console.warn(`⚠️ ID element not present: #${key}`);
}
}
});
document.documentElement.lang = lang;
} catch (error) {
console.error('Language resource error:', error);
}
});HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>How to Use the 'Useful Functions.xlsm' File</title>
<script>
document.addEventListener("DOMContentLoaded", function() {
const language = navigator.language || navigator.userLanguage;
let langCode;
switch (language) {
case 'ko':
case 'ko-KR': langCode = 'ko'; break;
case 'ja':
case 'ja-JP': langCode = 'jp'; break;
case 'zh':
case 'zh-CN': langCode = 'cn'; break;
default: langCode = 'en';
}
document.documentElement.lang = langCode;
});
</script>
</head>
<body>
<h6 class="classname1"></h6>
<p id="id4"></p>
<h6 class="classname2"></h6>
<p id="id1"></p>
<p id="id2"></p>
<p id="id3"></p>
<script src="./lang.js"></script>
</body>
</html>로컬 사용 가능 ▸ 언어파일과 구동파일 분리한 버전
langResource.js 파일
const langResource = {
ko: {
title: "사용 설명서",
classname1: "주의사항",
classname2: "참고사항",
id1: "여기보세요.",
id2: "저기보세요.",
id3: "그거보세요.",
id4: "~~~는 주의해주세요."
},
en: {
title: "User Manual",
classname1: "Caution",
classname2: "Note",
id1: "Look here.",
id2: "Look over there.",
id3: "Look at that.",
id4: "Please pay attention to ~~~."
},
jp: {
title: "使用説明書",
classname1: "注意事項",
classname2: "参考事項",
id1: "ここを見てください。",
id2: "あそこを見てください。",
id3: "それを見てください。",
id4: "~~~に注意してください。"
},
cn: {
title: "用户手册",
classname1: "注意事项",
classname2: "参考事项",
id1: "请看这里。",
id2: "请看那里。",
id3: "请看那个。",
id4: "请注意~~~。"
}
};lang.js 파일
document.addEventListener('DOMContentLoaded', () => {
try {
const browserLang = navigator.language.slice(0,2);
const htmlLang = document.documentElement.getAttribute('lang') || browserLang;
const lang = ['ko', 'en', 'jp', 'cn'].includes(htmlLang) ? htmlLang : 'en';
const resources = langResource[lang];
document.title = resources.title;
const classBasedKeys = new Set(['classname1', 'classname2']);
Object.entries(resources).forEach(([key, value]) => {
if (key === 'title') return;
if(classBasedKeys.has(key)) {
const elements = document.querySelectorAll(`.${key}`);
if(elements.length > 0) {
elements.forEach(el => {
el.style.opacity = 0;
setTimeout(() => {
el.textContent = value;
el.style.opacity = 1;
}, 200);
});
} else {
console.warn(`⚠️ Class element not present: .${key}`);
}
} else {
const element = document.getElementById(key);
if(element) {
element.style.opacity = 0;
setTimeout(() => {
element.textContent = value;
element.style.opacity = 1;
}, 200);
} else {
console.warn(`⚠️ ID element not present: #${key}`);
}
}
});
document.documentElement.lang = lang;
} catch (error) {
console.error('Language resource error:', error);
}
});HTML 파일
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>How to Use the 'Useful Functions.xlsm' File</title>
<script>
document.addEventListener("DOMContentLoaded", function() {
const language = navigator.language || navigator.userLanguage;
let langCode;
switch (language) {
case 'ko':
case 'ko-KR': langCode = 'ko'; break;
case 'ja':
case 'ja-JP': langCode = 'jp'; break;
case 'zh':
case 'zh-CN': langCode = 'cn'; break;
default: langCode = 'en';
}
document.documentElement.lang = langCode;
});
</script>
</head>
<body>
<h6 class="classname1"></h6>
<p id="id4"></p>
<h6 class="classname2"></h6>
<p id="id1"></p>
<p id="id2"></p>
<p id="id3"></p>
<script src="./langResource.js"></script>
<script src="./lang.js"></script>
</body>
</html>로컬 사용 불가(fetch API 사용.) ▸ 언어파일과 구동파일 분리한 버전
langResource.json 파일
{
"ko": {
"title": "사용 설명서",
"classname1": "주의사항",
"classname2": "참고사항",
"id1": "여기보세요.",
"id2": "저기보세요.",
"id3": "그거보세요.",
"id4": "~~~는 주의해주세요."
},
"en": {
"title": "User Manual",
"classname1": "Caution",
"classname2": "Note",
"id1": "Look here.",
"id2": "Look over there.",
"id3": "Look at that.",
"id4": "Please pay attention to ~~~."
},
"jp": {
"title": "使用説明書",
"classname1": "注意事項",
"classname2": "参考事項",
"id1": "ここを見てください。",
"id2": "あそこを見てください。",
"id3": "それを見てください。",
"id4": "~~~に注意してください。"
},
"cn": {
"title": "用户手册",
"classname1": "注意事项",
"classname2": "参考事项",
"id1": "请看这里。",
"id2": "请看那里。",
"id3": "请看那个。",
"id4": "请注意~~~。"
}
}lang.js 파일
document.addEventListener('DOMContentLoaded', async () => {
try {
const response = await fetch('langResource.json');
if (!response.ok) {
throw new Error('언어 리소스를 불러오는데 실패했습니다.');
}
const langResource = await response.json();
const browserLang = navigator.language.slice(0,2);
const htmlLang = document.documentElement.getAttribute('lang') || browserLang;
const lang = ['ko', 'en', 'jp', 'cn'].includes(htmlLang) ? htmlLang : 'en';
const resources = langResource[lang];
document.title = resources.title;
const classBasedKeys = new Set(['classname1', 'classname2']);
Object.entries(resources).forEach(([key, value]) => {
if (key === 'title') return;
if(classBasedKeys.has(key)) {
const elements = document.querySelectorAll(`.${key}`);
if(elements.length > 0) {
elements.forEach(el => {
el.style.opacity = 0;
setTimeout(() => {
el.textContent = value;
el.style.opacity = 1;
}, 200);
});
} else {
console.warn(`⚠️ Class element not present: .${key}`);
}
} else {
const element = document.getElementById(key);
if(element) {
element.style.opacity = 0;
setTimeout(() => {
element.textContent = value;
element.style.opacity = 1;
}, 200);
} else {
console.warn(`⚠️ ID element not present: #${key}`);
}
}
});
document.documentElement.lang = lang;
} catch (error) {
console.error('Language resource error:', error);
}
});
HTML 파일
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>How to Use the 'Useful Functions.xlsm' File</title>
<script>
document.addEventListener("DOMContentLoaded", function() {
const language = navigator.language || navigator.userLanguage;
let langCode;
switch (language) {
case 'ko':
case 'ko-KR': langCode = 'ko'; break;
case 'ja':
case 'ja-JP': langCode = 'jp'; break;
case 'zh':
case 'zh-CN': langCode = 'cn'; break;
default: langCode = 'en';
}
document.documentElement.lang = langCode;
});
</script>
</head>
<body>
<h6 class="classname1"></h6>
<p id="id4"></p>
<h6 class="classname2"></h6>
<p id="id1"></p>
<p id="id2"></p>
<p id="id3"></p>
<script src="./lang.js"></script>
</body>
</html>
공부 목적 블로그