iOS WebView中需用NSLocale.preferredLanguages.firstObject截取主语言码（如“zh-Hans”→“zh”），通过evaluateJavaScript注入window.__APP_LOCALE，并禁用缓存、添加时间戳防语言包复用；JS端须等待DOM就绪后读取该变量初始化i18n，切换时原生调用changeLanguage并通知前端更新。
iOS WebView 中如何正确传递系统语言给 HTML5 页面
HTML5 页面无法自动感知 iOS 系统语言，必须由原生层显式传入。直接读 NSLocale.current.languageCode 或 NSLocale.preferredLanguages.firstObject 不可靠——它可能返回 "zh-Hans"、"zh-Hant"、"en-US" 等带区域标识的字符串，而前端 i18n 库（如 i18next、vue-i18n）通常只认 "zh"、"en" 这类主语言码。
实操建议：
- 用
NSLocale.preferredLanguages.firstObject获取原始语言字符串，再截取前缀：例如@“zh-Hans”→@“zh”，@“pt-PT”→@“pt” - 通过
WKWebView.evaluateJavaScript(_:completionHandler:)注入全局变量：webView.evaluateJavaScript("window.__APP_LOCALE = 'zh';") - 或在加载 HTML 前，用
WKWebViewConfiguration的userContentController注册 JS 消息处理器，让 JS 主动调用webkit.messageHandlers.getLocale.postMessage(null)，原生侧响应并返回清洗后的语言码
避免 WKWebView 缓存导致语言切换不生效
HTML5 多语言资源（如 JSON 语言包）常通过 fetch 加载，若 URL 相同且服务器未设 Cache-Control: no-cache，iOS 可能复用旧响应，导致切语言后仍显示上一次的语言内容。
常见错误现象：手动改 window.__APP_LOCALE 后刷新页面，但翻译没变。
立即学习“前端免费学习笔记（深入）”；
解决方法：
- 为语言包请求添加时间戳或哈希参数：
fetch(`/i18n/zh.json?t=${Date.now()}`) - 在
WKWebViewConfiguration中禁用磁盘缓存：configuration.websiteDataStore = .nonPersistent()
- 或更精准地清除特定资源缓存：
WKWebsiteDataStore.default().removeData(ofTypes: [.memoryCache, .diskCache], modifiedSince: .distantPast)
JS 层如何安全读取 iOS 传入的语言并初始化 i18n
不能假设 window.__APP_LOCALE 在 JS 执行时已存在——尤其当 HTML 是异步加载或使用模块化打包（如 Webpack）时，JS 可能早于原生注入执行。
推荐写法（以 i18next 为例）：
function initI18n() {
const locale = window.__APP_LOCALE || navigator.language.split('-')[0] || 'en';
i18next.init({
lng: locale,
fallbackLng: 'en',
resources: { /* ... */ }
});
}
// 确保 DOM 和依赖就绪后再执行
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initI18n);
} else {
initI18n();
}
注意：不要用 navigator.language 作为兜底——iOS 上它反映的是系统设置语言，但用户可能在 App 内部手动切换过语言，此时应以原生传入值为准。
切换语言时原生与 JS 如何协同更新 UI
iOS 侧主动触发语言变更（比如用户在 App 设置里点了「繁体中文」），不能只改 JS 变量，还要通知已挂载的 Vue/React 组件重新渲染，否则 HTML5 页面不会响应。
实操关键点：
- 原生端调用：
webView.evaluateJavaScript("window.__APP_LOCALE = 'zh-Hant'; i18next.changeLanguage('zh');") - 前端需监听自定义事件（如
app:locale-change），并在 handler 中调用i18next.changeLanguage()，避免硬编码两次 - 若使用 React，确保组件用
useTranslation()或withTranslation()包裹，它们会自动订阅 i18n 实例变化 - 注意：
i18next.changeLanguage()是异步的，需 await 其 Promise 完成后再操作 DOM，否则可能取到旧翻译
最容易被忽略的是语言码标准化——iOS 返回的 zh-HK 和 zh-MO 都该映射为 zh-Hant，否则前端查不到对应语言包。这个映射逻辑必须在原生层做，而不是丢给 JS 处理。
