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中导致上述代码块失败的原因是什么？非常感谢任何帮助。

Answer 1

IE在导航器对象中没有语言属性。

它有userLanguage和Systemlanguage。

请检查How to getting browser current locale preference using javascript?

因此，对于IE，您可能需要检查navigator.userLanguage和navigator.Systemlanguage

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"
    });
  }
}

IE11 - 使用navigator.language无法正常工作的语言检测

2 个答案: