基于Javascript的动态多语言网站
我正在尝试根据用户浏览器语言动态更改网站的语言 我有以下代码：基于Javascript的动态多语言网站,javascript,html,arrays,json,dom,Javascript,Html,Arrays,Json,Dom,我正在尝试根据用户浏览器语言动态更改网站的语言 我有以下代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>MultiLingual</title>
<style>
button {
font-size: 30px;
padding: 0.25 2rem;
margin: 1rem;
width: 10rem;
cursor: pointer;
}
[lang="en-CA"] {
border: 5px solid #dd0000;
margin: 1rem;
}
[lang="fr-CA"] {
border: 5px solid limegreen;
margin: 1rem;
}
[lang="es-ES"] {
border: 5px solid gold;
margin: 1rem;
}
div[lang] {
display: none;
}
div[lang].lang-match {
display: block;
}
</style>
</head>
<body>
<div lang="en-CA">
<button data-key="btn-yes">Actual</button>
<button data-key="btn-no">Actual</button>
</div>
<div lang="es-ES">
<button data-key="btn-yes">DEFAULT</button>
<button data-key="btn-no">DEFAULT</button>
</div>
<div lang="fr-CA">
<button data-key="btn-yes">DEFAULT</button>
<button data-key="btn-no">DEFAULT</button>
</div>
<script>
let langdata = {
"languages": {
"en": {
"strings": {
"btn-yes": "yes",
"btn-no": "no"
}
},
"fr": {
"strings": {
"btn-yes": "oui",
"btn-no": "non"
}
},
"es": {
"strings": {
"btn-yes": "si",
"btn-no": "no"
}
}
}
}
</script>
<script>
//apply the language values to the content
document.addEventListener('DOMContentLoaded', () => {
let zones = document.querySelectorAll('html [lang]');
applyStrings(zones);
let lang = findLocaleMatch();
let container = document.querySelector(`html [lang*=${lang}]`);
container.className = 'lang-match';
});
function applyStrings(containers) {
containers.forEach(container => {
//find all the elements that have data-key
let locale = container.getAttribute('lang');
container.querySelectorAll(`[data-key]`).forEach(element => {
let key = element.getAttribute('data-key');
let lang = locale.substr(0, 2); //first 2 characters
if (key) {
element.textContent = langdata.languages[lang].strings[key];
}
});
})
}
function findLocaleMatch() {
let keys = Object.keys(langdata.languages); //from our data
let locales = Intl.getCanonicalLocales(keys); //from our data validated
let lang = navigator.language; //from browser
let locale = Intl.getCanonicalLocales(lang); //from browser validated
console.log('browser language', lang);
console.log('locales from data file', locale);
//find the match for locale inside locales
let langMatch = document.documentElement.getAttribute('lang'); //default
locales = locales.filter(l => locale == l);
langMatch = (locales.length > 0) ? locales[0] : langMatch;
return langMatch;
}
</script>
</body>
</html>
多语
钮扣{
字体大小：30px；
填充：0.25 2rem；
保证金：1rem；
宽度：10雷姆；
光标：指针；
}
[lang=“en-CA”]{
边框：5px实心#dd0000；
保证金：1rem；
}
[lang=“fr CA”]{
边框：5px固体石灰；
保证金：1rem；
}
[lang=“es”]{
边框：5px纯金；
保证金：1rem；
}
分区[朗]{
显示：无；
}
div[lang]。lang匹配{
显示：块；
}
实际的
实际的
违约
违约
违约
违约
设langdata={
“语言”：{
“en”：{
“字符串”：{
“btn是”：“是”，
“btn编号”：“编号”
}
},
“fr”：{
“字符串”：{
“btn是”：“是”，
“btn编号”：“非”
}
},
“es”：{
“字符串”：{
“btn是”：“si”，
“btn编号”：“编号”
}
}
}
}
//将语言值应用于内容
document.addEventListener（'DOMContentLoaded'，（）=>{
let zones=document.querySelectorAll（'html[lang]'）；
应用程序字符串（区域）；
设lang=findLocaleMatch（）；
让container=document.querySelector（`html[lang*=${lang}]`）；
container.className='lang match'；
});
函数ApplyString（容器）{
containers.forEach（container=>{
//查找具有数据键的所有元素
让locale=container.getAttribute（'lang'）；
container.querySelectorAll（`[data key]`）.forEach（element=>{
让key=element.getAttribute（'data-key'）；
设lang=locale.substr（0，2）；//前2个字符
如果（关键）{
element.textContent=langdata.languages[lang].strings[key]；
}
});
})
}
函数findLocaleMatch（）{
让keys=Object.keys（langdata.languages）；//来自我们的数据
让locales=Intl.getCanonicalLocales（key）；//从我们的数据验证
让lang=navigator.language；//从浏览器
让locale=Intl.getCanonicalLocales（lang）；//从浏览器验证
log（'browser language'，lang）；
log（'locales from data file'，locale）；
//在区域设置中查找区域设置的匹配项
让langMatch=document.documentElement.getAttribute（'lang'）；//默认值
locales=locales.filter（l=>locale==l）；
langMatch=（locales.length>0）？locales[0]：langMatch；
返回匹配；
}
希望有人能帮忙，它在Chrome上对我有用。设置>高级>语言>西班牙语>移至顶部>刷新页面。然后我看到按钮文本是西班牙语
findLocaleMatch（）findLocaleMatch（）