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

Posted 2023-05-07

【中文标题】用于翻译的自定义 vanilla JS 在 Android Chrome 上不起作用

【英文标题】：Custom vanilla JS for translation does not work on Android Chrome

【发布时间】：2020-11-14 21:25:56

【问题描述】：

我一直在努力使用任何（实际上是任何！）客户端（例如网络浏览器）翻译库。测试了几个：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）在区域设置切换器元素上发出事件 b）在某些（Brave，Dolphin）中，即使处于折叠状态的导航栏也不会展开.我希望后者通常与所选浏览器中的 JS 处理有关，但为什么在 Chrome 中相同的代码不起作用？

【参考方案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 太低了，下图叠加在移动导航上方。 :)