用于翻译的自定义香草JS在Android Chrome上不起作用

Question

我一直在努力使用任何(实际上是任何！(客户端(例如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();
});

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

但这里有一个棘手的部分：为什么桌面浏览器显示出预期的结果，但一些经过测试的移动浏览器拒绝a(在locale switcher元素上发出事件，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太低，下面的图像覆盖在移动导航上方。：(