Android Chrome不支持翻译自定义香草JS

Question

我一直在努力使用any (字面意思是any!)客户端(例如web浏览器)翻译库。测试了几个: jquery-i18next，jquery.i18n，localizejs，translate-js。猜猜发生了什么--没有一个真正像预期的那样工作，没有一个是即插即用的解决方案。这就是为什么我决定写一个普通的Javascript代码，它可以作为一个最简单的替代方案。代码如下：

let locale;

let dict = {
  'en': {...},
  'fr': {...}
};

function detectNavigatorLocale() {
  const languageString = navigator.language || '';
  const language = languageString.split(/[_-]/)[0].toLowerCase();

  switch (language) {
    case 'en':
      return 'en';
    case 'de':
      return 'de';
    default:
      return 'en';
  }
}

// replacement to $(document).ready() in jQuery
function docReady(fn) {
  // see if DOM is already available
  if (document.readyState === "complete" || document.readyState === "interactive") {
    // call on next available tick
    setTimeout(fn, 1);
  } else {
    document.addEventListener("DOMContentLoaded", fn);
  }
}

// helper to get nested value in JSON-like object by dot-path string
function findProp(obj, prop, defval) {
  if (typeof defval == 'undefined') defval = null;
  prop = prop.split('.');
  for (var i = 0; i < prop.length; i++) {
    if (typeof obj[prop[i]] == 'undefined')
      return defval;
    obj = obj[prop[i]];
  }
  return obj;
}

let switchers = document.querySelectorAll('[data-locale]');

for (let i = 0; i < switchers.length; i++) {
  switchers[i].onclick = function () {
    let newLocale = switchers[i].getAttribute('data-locale');
    locale = newLocale;
    translate();
  };
}

function translate(newLocale) {
  let els = document.querySelectorAll('[data-i18n]');

  for (let i = 0; i < els.length; i++) {
    let path = els[i].getAttribute('data-i18n');
    let translatation = findProp(dict[locale], path, 'undefined');
    els[i].innerHTML = translatation;
  }

  // trigger repainting
  window.dispatchEvent(new Event('resize'));
};


docReady(function () {
  locale = detectNavigatorLocale();
  translate();
});

要使其工作，在超文本标记语言中唯一要做的就是向需要翻译为<p data-i18n="some.path.in.dictionary">fallback text</p>的元素添加属性。为了改变语言，我使用了<li data-locale="en">EN</li>和类似的语言。

但这里是棘手的部分:为什么桌面浏览器显示预期的结果，但几个测试的移动浏览器拒绝a)在区域设置切换器元素上发出事件，以及b)在某些情况下(Brave，Dolphin)甚至在折叠状态下的导航栏都无法展开。我认为后者通常与所选浏览器中的JS处理有关，但为什么在Chrome中，例如相同的代码不能工作？

Answer 1

首先，我用下面的代码替换了设置onclick的坏习惯：

function switchLocale(loc) {
    locale = loc;
    translate();
}

let switchers = document.querySelectorAll('[data-locale]');

switchers.forEach(
    function(switcher) {
        switcher.addEventListener("click", function() {
            // alert(switcher.id);
            switchLocale(switcher.getAttribute('data-locale'));
        })
    }
)

并测试了它的工作正常。但实际问题是，z-index太低了，下面的图像覆盖在移动导航之上。:)