检测谷歌浏览器翻译功能

Question

检测谷歌浏览器翻译功能

28

我已将Google翻译栏添加到我们的网站上，但由于布局方式的原因，如果主导航的翻译比英语要长，则会将一些链接推到下一行，并开始遮盖其他元素。我有一些JavaScript代码可以检测翻译栏是否在使用中，并使菜单和搜索框的包含div变宽以进行补偿，尽管这会影响布局，但远比覆盖页面某些部分更可取。

然而，Chrome现在在浏览器中内置了翻译功能，如果有人使用此功能，他们显然不会使用嵌入式版本，因此我无法检测并应用我的宽度修复程序。有没有办法检测是否正在使用Chrome的内置翻译？

- Chao

我也对此很感兴趣。你最终找到了如何做吗？ - whitehawk

@whitehawk 请看我下面添加的评论。 - Chao

只是一些可能有帮助的东西，Google Chrome 和 Microsoft Edge 使用 JavaScript 来翻译网页。如果我关闭网页的 JavaScript，那么页面就不会被翻译。不确定这是否正常和完全已知，所以我还是写下了它（我认为应该用C/C++或其他方式在页面外部完成）。 - Edw590

5个回答

9

截至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），则需要跟踪具有文本内容的元素的更改，以查看它们是否已经被翻译，同时使用上述代码设置标志来确定更改是由翻译还是恢复原始文本引起的。

- Stephen G

8

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

因此，您可以使用CSS类似于:

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

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

希望这能帮到您！

- user2899256

5

我刚刚写了一篇关于在Google Chrome，Yandex浏览器和Microsoft翻译扩展中检测自动机器翻译的文章。我还没有找到如何检测Naver Whale浏览器，这是最后一个具有内置页面翻译功能的浏览器。

简而言之，要注意以下DOM标记:

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

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

- Daniel

1

在2022年的工作中，需要向文档添加一个body类，以表明所翻译的语言。

 if(document.querySelector('meta[http-equiv="X-Translated-To"]')){
  var translatedTo = document.querySelector('meta[http-equiv="X-Translated-To"]').getAttribute('content');
  console.log("Translated to: "+translatedTo);
  document.body.classList.add("translatedTo"+translatedTo);
 }

这是基于谷歌目前正在添加一对元标记的事实：

<meta http-equiv="X-Translated-By" content="Google">
<meta http-equiv="X-Translated-To" content="es">

- mayersdesign

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- mx0 · Accepted Answer

也许尝试使用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);