h5实现i18n语言切换
在HTML5中，可以使用JavaScript和本地存储来实现语言切换的i18n功能。以下是一个简单的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Internationalization Example</title>
<script>
// 语言设置对象
var i18n = {
"en": {
"greeting": "Hello"
},
"es": {
"greeting": "Hola"
},
"fr": {
"greeting": "Bonjour"
}
};
// 初始化语言
function initLanguage() {
var lang = localStorage.getItem('language') || navigator.language.split('-')[0]; // 获取本地存储的语言或浏览器语言
document.querySelector('html').setAttribute('lang', lang);
document.querySelector('#greeting').textContent = i18n[lang].greeting;
}
// 切换语言
function toggleLanguage(lang) {
localStorage.setItem('language', lang); // 存储语言选择
initLanguage(); // 初始化新的语言设置
}
// 页面加载时初始化语言
window.onload = initLanguage;
</script>
</head>
<body>
<h1 id="greeting"></h1>
<button onclick="toggleLanguage('en')">English</button>
<button onclick="toggleLanguage('es')">Español</button>
<button onclick="toggleLanguage('fr')">Français</button>
</body>
</html>这段代码定义了一个简单的i18n对象，包含了不同语言的问候语。initLanguage 函数会在页面加载时调用，或在用户切换语言时调用，以更新页面语言。toggleLanguage 函数会保存用户的语言选择到本地存储，并重新初始化语言设置。用户每次刷新页面或进入页面时，都会检查本地存储的语言设置，如果存在则使用该设置，否则使用浏览器语言。
评论已关闭