h5实现i18n语言切换

作者：System 时间：2024年08月12日分类：所有,jquery 字数：1469

在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 函数会保存用户的语言选择到本地存储，并重新初始化语言设置。用户每次刷新页面或进入页面时，都会检查本地存储的语言设置，如果存在则使用该设置，否则使用浏览器语言。

h5实现i18n语言切换

评论已关闭

推荐阅读