Google Translate API在Mac及iPad设备自动翻译为西班牙语异常问题求助

问题根因 #

• Mac、iPad设备默认使用Safari浏览器，其智能跟踪预防（ITP）机制对Google翻译API依赖的googtransCookie、hash变更触发逻辑的处理规则和Windows端的Chrome、Edge浏览器存在差异
• 现有代码执行时序不匹配：Safari中document.ready触发时Google翻译组件可能还未完成初始化，提前修改#googtrans哈希值会触发异常的自动翻译逻辑
• 缺少参数合法性兜底：如果查询参数中没有language字段，currentLang会返回null，生成的#googtrans(en|null)为非法值，Safari会直接读取之前缓存的googtransCookie（如果之前曾切换过西班牙语，就会自动触发翻译）

修复方案 #

1. 新增参数合法性校验与Cookie清理 #

修改changeLanguage函数，先清理Safari缓存的旧翻译配置，仅当传入合法语言参数时才触发翻译逻辑，避免非法值导致的默认翻译：

function changeLanguage() {
  // 先清理残留的googtrans Cookie，避免Safari缓存旧配置
  document.cookie = "googtrans=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
  
  let currentLang = searchParams.get('language');
  // 配置你支持的合法语言列表
  const validLangs = ['en', 'es'];
  // 无合法参数时直接显示页面，不触发翻译
  if (!currentLang || !validLangs.includes(currentLang)) {
    $('body').show();
    return;
  }
  
  $(`[data-lang='${currentLang}']`).addClass('active');
  window.location.hash = `#googtrans(en|${currentLang})`;
  setTimeout(() => {
    $('body').show();
  }, 1000);
}

2. 调整逻辑执行时序 #

将changeLanguage的调用从document.ready移到Google翻译组件初始化回调的末尾，保证组件加载完成后再执行语言切换：

function googleTranslateElementInit() {
  new google.translate.TranslateElement(
    { pageLanguage: 'en', layout: google.translate.TranslateElement.FloatPosition.TOP_LEFT },
    'google_translate_element'
  );
  // 组件初始化完成后再执行语言切换
  changeLanguage();
}

// 移除原document.ready中的changeLanguage调用
$(document).ready(() => {
  // 保留其他原有逻辑即可
});

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