网站Google Translate无法保留上次选中语言问题求助

嘿，我来帮你搞定这个Google翻译语言记忆不生效的问题！

核心问题在于：虽然你能检测到googtrans Cookie，但Google Translate的初始化逻辑可能没及时读取并应用这个Cookie的值。下面是具体的修复方案：

1. 调整脚本加载顺序，确保Cookie先被读取 #

Google Translate的初始化脚本需要在获取到Cookie值之后再执行，不然它会默认用页面初始语言。你可以这样调整代码结构：

<script src="./source/build/js/app.cookies.js"></script>
<div id="google_translate_element"></div>
<script type="text/javascript">
// 先从Cookie中提取保存的语言
const getSavedLang = () => {
  const cookieValue = document.cookie
    .split('; ')
    .find(row => row.startsWith('googtrans='))
    ?.split('=')[1];
  // googtrans的格式一般是"/auto/xx"，提取最后一段的语言代码
  return cookieValue ? cookieValue.split('/')[2] : null;
};

const targetLang = getSavedLang();

// 初始化Google Translate
function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'auto', // 你的页面默认语言
    includedLanguages: 'en,es,fr', // 按需自定义支持的语言列表
    layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
    autoDisplay: false, // 关闭自动显示，避免覆盖我们的自定义设置
    defaultLanguage: targetLang || 'en' // 优先用Cookie保存的语言，无则用默认语言
  }, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

2. 手动触发语言切换（应对初始化延迟问题） #

有时候Google Translate的DOM元素加载会有延迟，导致defaultLanguage设置不生效。可以在初始化后延迟触发语言选择：

// 在googleTranslateElementInit函数末尾添加这段代码
setTimeout(() => {
  if (targetLang) {
    const translateDropdown = document.querySelector('.goog-te-combo');
    if (translateDropdown) {
      translateDropdown.value = targetLang;
      // 手动触发change事件，让Google Translate应用选中的语言
      translateDropdown.dispatchEvent(new Event('change'));
    }
  }
}, 600); // 延迟时间可根据实际页面加载情况调整

3. 检查Cookie的有效性 #

• 确保googtrans Cookie的路径设置为/（全站有效），如果是子路径的话，其他页面会读取不到。
• 确认Cookie格式是googtrans=/auto/xx（比如/auto/es代表切换到西班牙语），如果你的Cookie格式不符，需要调整写入逻辑。

4. 避免Cookie被意外覆盖 #

检查你的app.cookies.js代码，确保没有在页面加载时重置或删除googtrans Cookie的逻辑——只有用户主动切换语言时，才应该更新这个Cookie。

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