Core PHP项目谷歌翻译默认语言设置：下拉框显示异常

在Core PHP项目中使用谷歌翻译，需求是让全球用户打开网站时页面默认显示英语。当前代码在迪拜地区能将页面默认设为英语，但谷歌翻译的下拉框却显示阿拉伯语，修改代码后效果未达预期，寻求解决思路。

相关代码：

function googleTranslateElementInit() {
  setCookie('googtrans', '/en/en',1);
  new google.translate.TranslateElement({
    pageLanguage: 'en',
    includedLanguages: 'en'
  }, 'google_translate_element');
 }
 function setCookie(key, value, expiry) {
  var expires = new Date();
  expires.setTime(expires.getTime() + (expiry * 24 * 60 * 60 * 1000));
  document.cookie = key + '=' + value + ';expires=' + expires.toUTCString();
 }

问题说明：页面默认已切换为英语，但翻译下拉框显示阿拉伯语

解决思路 #

1. 修正googtrans Cookie格式 #

谷歌翻译的googtrans Cookie正确格式为/源语言/目标语言，当前设置的/en/en无效（源与目标语言一致）。需根据用户浏览器默认语言动态设置，明确从用户本地语言切换到英语：

function googleTranslateElementInit() {
  // 获取用户浏览器默认语言，默认用阿拉伯语作为备选源语言
  var userLang = navigator.language || navigator.userLanguage || 'ar';
  // 设置从用户语言切换到英语
  setCookie('googtrans', '/' + userLang + '/en', 1);
  // 后续初始化代码...
}

2. 配置翻译控件的强制显示规则 #

给TranslateElement添加autoDisplay: false关闭自动检测，同时指定布局，强制控件显示英语为当前选中项：

new google.translate.TranslateElement({
  pageLanguage: 'en',
  includedLanguages: 'en',
  layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
  autoDisplay: false, // 禁止自动根据地区调整控件显示语言
}, 'google_translate_element');

3. 完善Cookie的作用范围 #

当前setCookie函数未指定路径和域名，可能导致Cookie在部分页面失效。修改函数添加路径和域名参数：

function setCookie(key, value, expiry) {
  var expires = new Date();
  expires.setTime(expires.getTime() + (expiry * 24 * 60 * 60 * 1000));
  // 设置Cookie作用于全站根目录，域名自动适配当前网站
  document.cookie = `${key}=${value};expires=${expires.toUTCString()};path=/;domain=${window.location.hostname}`;
}

4. 延迟初始化翻译控件 #

避免谷歌翻译脚本加载过早，导致Cookie未生效就初始化控件，用setTimeout延迟执行：

function googleTranslateElementInit() {
  var userLang = navigator.language || navigator.userLanguage || 'ar';
  setCookie('googtrans', '/' + userLang + '/en', 1);
  // 延迟100ms初始化，确保Cookie已写入
  setTimeout(() => {
    new google.translate.TranslateElement({
      pageLanguage: 'en',
      includedLanguages: 'en',
      layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
      autoDisplay: false
    }, 'google_translate_element');
  }, 100);
}

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