Question

我已将Google翻译栏添加到我们的网站，但由于主导航中的翻译比英语长，所以布局如何工作会将某些链接推到下一行并开始掩盖其他元素。我有一些Javascript检测翻译栏是否正在使用，并使菜单和搜索框的包含div更宽，以补偿，虽然这确实影响布局，它远远优于覆盖页面的部分。

然而，Chrome现在已经内置了浏览器的翻译，如果有人使用它，他们显然不会使用嵌入式版本，所以我无法检测到它来应用我的宽度修复。有没有办法检测Chrome的内置翻译是否正在使用？

Answer 1

也许尝试使用js来检测菜单内容是否已更改，然后应用新样式。

<强>更新

当Chrome翻译页面时，会向页面添加多个元素：

两个script元素到head标记
全球对象window.google
class = "translated-ltr"至html代码
div id="goog-gt-tt"至body代码

您可以观察DOM中的更改，以了解内容的翻译时间：

document.addEventListener('DOMSubtreeModified', function (e) {
    if(e.target.tagName === 'HTML' && window.google) {
        if(e.target.className.match('translated')) {
            // page has been translated
         } else {
            // page has been translated and translation was canceled
        }
   }
}, true);

Answer 2

我知道这已经晚了......而且它不是JS解决方案......但是如果您只是需要确保在显示Google翻译栏时可以在页面上设置元素样式，那么您可以使用CSS。 Translate代码在body标签中添加了一个“translated-ltr”类（如果语言是从右到左，而不是像英语那样从左到右，则为“translated-rtl”）。

所以你可以使用CSS classess，如：

.translated-ltr .nav, .translated-rtl .nav {}

根据需要替换正确的类/ ID。

希望这有帮助！

Answer 3

我刚刚在detecting automatic machine-translations上用Google Chrome，Yandex Browser和Microsoft Translate Extension写了一篇文章。我还没有弄清楚如何检测Naver Whale浏览器，这是最后一个具有内置页面翻译功能的浏览器。

它的简短之处在于注意以下DOM标记：

!!document.querySelector("html.translated-ltr, head.translated-rtl, ya-tr-span, *[_msttexthash]");

您可以从域名列表（在链接的文章中找到）中检测基于Web的代理翻译服务。

Answer 4

截至2019年，上面选择的答案似乎并不完全有效，但是我已经能够使用以下修改后的版本来跟踪对<html>元素（document.documentElement的类名更改使用翻译或“显示原文”时：

var observer = new MutationObserver(function (event) {
    if(document.documentElement.className.match('translated')) {
        alert("Page translate");
    } else {
        alert("Page untranslate");
    }
});

observer.observe(document.documentElement, {
  attributes: true,
  attributeFilter: ['class'],
  childList: false,
  characterData: false
});

但是重要的是要注意，这将在页面翻译开始时在实际更改单个内容之前触发。

如果您需要执行取决于翻译文本特征的操作（例如，检查它现在是否溢出div），那么您将需要跟踪具有文本内容的元素的更改，以查看它们是否确实存在翻译，同时还使用上述代码设置标记来确定更改是翻译的结果还是原始文本的还原。

检测Google Chrome翻译

4 个答案: