如何获取浏览器页面当前语言并监听语言变更？

问题原因 #

• window.navigator.language返回的是浏览器系统语言，并非Google翻译插件转换后的页面语言，所以无论页面翻译状态如何，它只会固定返回浏览器设置的默认语言（比如你遇到的en）。
• 旧的Stack Overflow方案失效，大概率是因为Google翻译插件的DOM结构或内部API已经更新。

可行解决方案 #

1. 首次加载时获取当前翻译语言 #

Google翻译会在页面中插入包含当前语言信息的元素，我们可以通过DOM查询直接获取：

// 获取当前翻译后的页面语言
function getCurrentTranslatedLang() {
  // 优先定位Google翻译的下拉选择框
  const langSelect = document.querySelector('.goog-te-combo');
  if (langSelect) {
    return langSelect.value;
  }
  // 备选：读取页面html标签的lang属性（部分场景下翻译插件会更新这个属性）
  return document.documentElement.lang || '未检测到翻译语言';
}

// 页面加载完成后执行
window.addEventListener('load', () => {
  console.log('当前页面语言:', getCurrentTranslatedLang());
});

2. 实时监听语言变更事件 #

Google翻译切换语言时，会修改页面DOM或相关属性，我们可以用MutationObserver监听关键元素的变化：

// 监听翻译语言变更
function observeLangChange() {
  const langSelect = document.querySelector('.goog-te-combo');
  if (langSelect) {
    // 监听下拉选框的切换事件
    langSelect.addEventListener('change', () => {
      console.log('变更后的页面语言:', langSelect.value);
    });
  } else {
    // 监听html标签的lang属性变化（适配浮动翻译面板场景）
    const observer = new MutationObserver((mutations) => {
      mutations.forEach(mutation => {
        if (mutation.attributeName === 'lang') {
          console.log('变更后的页面语言:', document.documentElement.lang);
        }
      });
    });
    observer.observe(document.documentElement, { attributes: true });
  }
}

// 页面加载完成后启动监听
window.addEventListener('load', observeLangChange);

3. 注意事项 #

• 如果页面加载较慢，Google翻译插件可能晚于页面初始化完成，可给监听代码加1-2秒的延迟（用setTimeout包裹）。
• Google翻译的DOM类名可能随版本更新，若上述选择器失效，可打开浏览器开发者工具，手动定位当前翻译语言对应的元素，修改选择器即可。

内容的提问来源于stack exchange，提问作者Gyanendra Pal Singh