本文介绍一种轻量、安全且可扩展的纯 JavaScript 方案，通过解析 URL 中的 language 参数（如 ?language=es），动态渲染对应语言的标题与段落内容，并支持 HTML 片段的安全插入。
本文介绍一种轻量、安全且可扩展的纯 javascript 方案，通过解析 url 中的 `language` 参数（如 `?language=es`），动态渲染对应语言的标题与段落内容，并支持 html 片段的安全插入。
在内部 WebView2 应用中实现多语言内容展示时，无需引入完整框架即可高效完成需求。核心思路是：从 URL 提取语言代码 → 安全查表获取对应文案 → 动态注入 DOM。相比遍历所有
/
并隐藏的方式，该方案更简洁、可维护性更强，且天然适配 50+ 语言扩展。
✅ 推荐实现：安全解析 + 动态渲染
以下为生产就绪的 JavaScript 实现（兼容现代浏览器及 WebView2）：
<article>
<h1 id="Title">Loading...</h1>
<p id="Phrase"></p>
</article>
<script>
// 1. 定义多语言资源（支持任意数量语言）
const translations = {
en: { title: "Welcome", phrase: "Thank you for using our app." },
es: { title: "Bienvenido", phrase: "Gracias por usar nuestra aplicación." },
fr: { title: "Bienvenue", phrase: "Merci d'utiliser notre application." },
zh: { title: "欢迎", phrase: "感谢使用我们的应用。" }
// 可持续追加：de, ja, ko, pt, etc.
};
// 2. 安全获取 URL 中的 language 参数（默认 'en'）
const urlParams = new URLSearchParams(window.location.search);
const langCode = urlParams.get('language') || 'en';
// 3. 防御性检查：确保语言存在，避免运行时错误
if (!translations[langCode]) {
console.warn(`Language '${langCode}' not found. Falling back to 'en'.`);
}
const locale = translations[langCode] || translations.en;
// 4. 渲染纯文本内容（推荐用于标题、简短文案）
document.getElementById('Title').textContent = locale.title;
document.getElementById('Phrase').textContent = locale.phrase;
// ✅ 5. 【关键】若需支持内联 HTML（如链接、强调等），使用 insertAdjacentHTML
// 示例：phrase 字段含 HTML（如 "<a href='#'>Learn more</a>"）
// 注意：仅当内容可信（来自开发者维护的 JSON）时才启用此方式
const phraseEl = document.getElementById('Phrase');
phraseEl.innerHTML = ''; // 先清空，防止 XSS 残留
phraseEl.insertAdjacentHTML('beforeend', locale.phrase || '');
</script>⚠️ 重要注意事项
- 安全性优先：innerHTML 仅适用于完全受控的内容源（如上述硬编码对象）。若语言数据来自外部 API 或用户输入，必须使用 textContent 并转义 HTML，或借助 DOMPurify.sanitize() 进行净化。
- 健壮性保障：始终校验 urlParams.get() 返回值，提供 fallback 语言（如 'en'），避免因参数缺失或拼写错误导致空白页。
- SEO 无关性：因您明确说明该页面仅用于 WebView2 内部展示，无需考虑服务端渲染或预加载优化；客户端 JS 渲染完全满足需求。
- 扩展建议：50+ 语言可拆分为独立 JSON 文件按需加载（配合 fetch()），但当前静态对象方式在 WebView2 中性能更优、无网络依赖。
✅ 最终调用示例
- test.html?language=en → 显示英文
- test.html?language=fr → 显示法文
- test.html（无参数）→ 默认显示英文
此方案零依赖、语义清晰、易于测试与维护，是 WebView2 场景下多语言内容动态切换的理想选择。
