IE11 - 使用navigator.language进行语言检测无法工作

Question

我可以完成这项任务，以下是翻译的结果：

我在一个React应用程序中运行了一个函数来检测用户的浏览器语言，然后更新网站的语言偏好，并将网站作为en-GB（默认值）、en-US或zh-Hans的任一语言提供。如果检测到en-US或zh-Hans的某个变体，脚本才会更新网站的语言。

引起错误的函数是：

function* setLanguageFromBrowserSettings() {
  let lang = null;
  if ((navigator.languages[0] === "en-US") || (navigator.languages[0] === "en")) {
    lang = "en-US";
    console.log("Language set to en-US");
  } else if ((navigator.languages[0] === "zh") || (navigator.languages[0] === "zh-CN") || (navigator.languages[0] === "zh-Hans")) {
    lang = "zh-Hans";
    console.log("Language set to zh-Hans");
  } else if ((navigator.language === "en-US") || (navigator.language === "en")) {
    lang = "en-US";
    console.log("Language set to en-US");
  } else if ((navigator.language === "zh") || (navigator.language === "zh-CN") || (navigator.language === "zh-Hans")) {
    lang = "zh-Hans";
    console.log("Language set to zh-Hans");
  }
  if (lang) {
    yield put({
      type: "Translations/SetLocale",
      payload: lang
    });
  }
}

错误信息是：

uncaught at anonymous at anonymous

 at anonymous

 TypeError: Unable to get property '0' of undefined or null reference

   at setLanguageFromBrowserSettings$ (http://10.0.0.80:3001/static/js/bundle.js:124136:11)

   at tryCatch (http://10.0.0.80:3001/static/js/bundle.js:85481:7)

   at invoke (http://10.0.0.80:3001/static/js/bundle.js:85715:9)

   at prototype[method] (http://10.0.0.80:3001/static/js/bundle.js:85533:9)

   at next (http://10.0.0.80:3001/static/js/bundle.js:83498:9)

   at proc (http://10.0.0.80:3001/static/js/bundle.js:83457:3)

   at resolveIterator (http://10.0.0.80:3001/static/js/bundle.js:83643:5)

   at runCallEffect (http://10.0.0.80:3001/static/js/bundle.js:83704:5)

   at runEffect (http://10.0.0.80:3001/static/js/bundle.js:83617:5)

   at next (http://10.0.0.80:3001/static/js/bundle.js:83502:9)

   at currCb (http://10.0.0.80:3001/static/js/bundle.js:83575:7)

   at end (http://10.0.0.80:3001/static/js/bundle.js:83543:18)

   at task.cont (http://10.0.0.80:3001/static/js/bundle.js:83286:11)

我可以通过修改代码，使得IE11的语言切换伪操作起来。代码如下：

function* setLanguageFromBrowserSettings() {
  let lang = "en-US";
  if (lang) {
    yield put({
      type: "Translations/SetLocale",
      payload: lang
    });
  }
}

这意味着问题出现在这段代码块中：

  if ((navigator.languages[0] === "en-US") || (navigator.languages[0] === "en")) {
    lang = "en-US";
    console.log("Language set to en-US");
  } else if ((navigator.languages[0] === "zh") || (navigator.languages[0] === "zh-CN") || (navigator.languages[0] === "zh-Hans")) {
    lang = "zh-Hans";
    console.log("Language set to zh-Hans");
  } else if ((navigator.language === "en-US") || (navigator.language === "en")) {
    lang = "en-US";
    console.log("Language set to en-US");
  } else if ((navigator.language === "zh") || (navigator.language === "zh-CN") || (navigator.language === "zh-Hans")) {
    lang = "zh-Hans";
    console.log("Language set to zh-Hans");
  }

以上代码在Chrome和Firefox中运行良好，但在IE（通常）中无法正常工作。

有人知道是什么导致上述代码块在IE11中失败吗？非常感谢您的帮助。

- Michael Smith

---

对于IE浏览器，language关键词是错误的，请使用browserLanguage和systemLanguage。 - Andrei Todorut

Answer 1

在navigator对象中，IE没有languages属性。

它有userLanguage和Systemlanguage。

请参考如何使用JavaScript获取浏览器当前语言环境偏好？

因此，在IE的情况下，您可能需要检查navigator.userLanguage和navigator.Systemlanguage

- Vignesh Murugan

---

谢谢 - 你的答案帮助我找出了问题所在。代码失败是因为我正在检查不存在的东西 - IE11确实可以访问navigator.language属性，这就是我的IE11特定代码正在检查的内容，但由于尝试检查不存在的navigator.languages属性的值而失败。 - Michael Smith

Answer 2

这个答案与IE11无法访问navigator.languages属性有关。

需要修改代码（仍需重构！）以检查navigator.languages属性是否存在，然后测试语言并在条件不满足时返回。

function* setLanguageFromBrowserSettings() {
  if (!navigator.languages) {
    if ((navigator.language === "en-US") || (navigator.language === "en")) {
      console.log("Language set to en-US");
      yield put({
        type: "Translations/SetLocale",
        payload: "en-US"
      });
    } else if ((navigator.language === "zh") || (navigator.language === "zh-CN") || (navigator.language === "zh-Hans")) {
      console.log("Language set to zh-Hans");
      yield put({
        type: "Translations/SetLocale",
        payload: "zh-Hans"
      });
    }
    return 0;
  }
  if ((navigator.languages[0] === "en-US") || (navigator.languages[0] === "en")) {
    console.log("Language set to en-US");
    yield put({
      type: "Translations/SetLocale",
      payload: "en-US"
    });
  } else if ((navigator.languages[0] === "zh") || (navigator.languages[0] === "zh-CN") || (navigator.languages[0] === "zh-Hans")) {
    console.log("Language set to zh-Hans");
    yield put({
      type: "Translations/SetLocale",
      payload: "zh-Hans"
    });
  }
}

- Michael Smith