无npm包实现纯HTML/CSS/JS网站多语言动态切换方案咨询

当然可以！不用npm包完全能实现类似ngx-translate的动态语言切换，甚至多静态HTML页面的无刷新平滑过渡也有办法搞定，我给你详细拆解两种方案：

这种方案和ngx-translate的思路一致，用JSON文件存储翻译内容，通过JavaScript动态替换页面文本，全程无刷新。

步骤1：准备翻译JSON文件 #

创建3个结构完全一致的JSON文件，键名统一，值对应不同语言：

• en.json（英文）

{
  "welcome": "Welcome to my website!",
  "about": "About Us",
  "contact": "Contact Us",
  "language": "Language"
}

• zh.json（中文）

{
  "welcome": "欢迎来到我的网站！",
  "about": "关于我们",
  "contact": "联系我们",
  "language": "语言"
}

• es.json（西班牙语）

{
  "welcome": "¡Bienvenido a mi sitio web!",
  "about": "Sobre Nosotros",
  "contact": "Contáctenos",
  "language": "Idioma"
}

步骤2：标记需要翻译的HTML元素 #

给页面中需要切换语言的元素添加data-i18n属性，值对应JSON里的键：

<header>
  <h1 data-i18n="welcome"></h1>
  <nav>
    <a href="#" data-i18n="about"></a>
    <a href="#" data-i18n="contact"></a>
  </nav>
</header>
<div class="language-switcher">
  <span data-i18n="language"></span>
  <button onclick="switchLanguage('en')">EN</button>
  <button onclick="switchLanguage('zh')">ZH</button>
  <button onclick="switchLanguage('es')">ES</button>
</div>

步骤3：实现核心JavaScript逻辑 #

写一个工具函数加载翻译文件（缓存已加载的内容避免重复请求），再写切换语言的核心函数：

// 缓存已加载的翻译，减少重复请求
const translations = {};
// 默认语言优先取本地存储，没有则用中文
let currentLang = localStorage.getItem('selectedLang') || 'zh';

// 加载指定语言的翻译文件
async function loadTranslation(lang) {
  if (translations[lang]) return translations[lang];
  try {
    const response = await fetch(`./${lang}.json`);
    const data = await response.json();
    translations[lang] = data;
    return data;
  } catch (error) {
    console.error(`加载${lang}翻译失败:`, error);
    return {};
  }
}

// 更新页面所有需要翻译的文本
async function updatePageText(lang) {
  const translation = await loadTranslation(lang);
  // 遍历所有带data-i18n属性的元素
  document.querySelectorAll('[data-i18n]').forEach(el => {
    const key = el.getAttribute('data-i18n');
    if (translation[key]) el.textContent = translation[key];
  });
  // 保存用户选择到本地存储，下次打开自动应用
  localStorage.setItem('selectedLang', lang);
  currentLang = lang;
}

// 切换语言的触发函数
async function switchLanguage(lang) {
  if (lang === currentLang) return;
  await updatePageText(lang);
}

// 页面加载时初始化语言
document.addEventListener('DOMContentLoaded', () => {
  updatePageText(currentLang);
});

这样点击语言按钮就能无刷新切换文本，而且用户下次打开页面会自动加载上次选择的语言。

如果你的网站是多个独立静态HTML页面（比如index.html、about.html），要实现无刷新切换+平滑过渡，可以用History API配合fetch加载页面内容，再用CSS实现过渡动画。

步骤1：统一页面结构 #

确保所有页面有相同的外层框架，比如都包含#content容器存放主体内容，导航栏保持一致：

<!-- index.html 示例 -->
<!DOCTYPE html>
<html>
<head>
  <title>Home</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <nav class="navbar">
    <a href="index.html" class="nav-link">Home</a>
    <a href="about.html" class="nav-link">About</a>
    <a href="contact.html" class="nav-link">Contact</a>
  </nav>
  <div id="content" class="page-content">
    <!-- 首页内容 -->
    <h1>Welcome Home</h1>
  </div>
  <script src="app.js"></script>
</body>
</html>

步骤2：添加CSS过渡动画 #

在styles.css里定义内容切换的淡入淡出效果：

.page-content {
  opacity: 1;
  transition: opacity 0.3s ease;
}

.page-content.fading {
  opacity: 0;
}

步骤3：实现无刷新切换的JavaScript逻辑 #

在app.js里监听导航点击，阻止默认跳转，用fetch加载目标页面并替换内容：

document.addEventListener('DOMContentLoaded', () => {
  const content = document.getElementById('content');
  const navLinks = document.querySelectorAll('.nav-link');

  // 核心页面切换函数
  async function navigateTo(url) {
    // 先触发淡出动画
    content.classList.add('fading');
    // 等待动画结束再加载新内容
    await new Promise(resolve => setTimeout(resolve, 300));

    try {
      // 用fetch获取目标页面的HTML
      const response = await fetch(url);
      const html = await response.text();
      // 解析HTML，提取目标页面的#content内容和标题
      const parser = new DOMParser();
      const doc = parser.parseFromString(html, 'text/html');
      const newContent = doc.getElementById('content').innerHTML;
      const newTitle = doc.title;

      // 更新当前页面的内容和标题
      content.innerHTML = newContent;
      document.title = newTitle;

      // 用History API修改URL，无刷新更新地址栏
      history.pushState({ path: url }, '', url);

      // 触发淡入动画
      content.classList.remove('fading');
      
      // 执行新页面中的脚本（如果有）
      executePageScripts(doc);
    } catch (error) {
      console.error('页面加载失败:', error);
      content.innerHTML = '<h1>页面未找到</h1>';
      content.classList.remove('fading');
    }
  }

  // 执行新页面中的脚本代码
  function executePageScripts(doc) {
    const scripts = doc.querySelectorAll('script');
    scripts.forEach(script => {
      const newScript = document.createElement('script');
      newScript.src = script.src || null;
      newScript.textContent = script.textContent || null;
      document.body.appendChild(newScript);
    });
  }

  // 监听导航链接点击
  navLinks.forEach(link => {
    link.addEventListener('click', (e) => {
      e.preventDefault();
      const url = link.getAttribute('href');
      navigateTo(url);
    });
  });

  // 监听浏览器前进/后退按钮
  window.addEventListener('popstate', (e) => {
    if (e.state && e.state.path) {
      navigateTo(e.state.path);
    }
  });
});

这样点击导航链接时，页面会先平滑淡出，加载新内容后再淡入，全程无刷新，地址栏URL同步更新，浏览器的前进后退按钮也能正常工作。

内容的提问来源于stack exchange，提问作者decebal