检测谷歌浏览器翻译
Posted
技术标签:
【中文标题】检测谷歌浏览器翻译【英文标题】：Detecting Google Chrome Translation 【发布时间】：2011-06-20 16:55:03 【问题描述】：我已将 Google 翻译栏添加到我们的网站，但由于布局的工作原理，如果主导航上的翻译长于英语，则将一些链接向下推到下一行并开始掩盖其他元素。我有一些 javascript 可以检测翻译栏是否正在使用，并使菜单和搜索框的包含 div 更宽以进行补偿，虽然这确实会影响布局，但它比覆盖页面的某些部分要好得多。
但是 Chrome 现在已经在浏览器中内置了翻译，如果有人使用它，他们显然不会使用嵌入式版本，所以我无法检测到它来应用我的宽度修复。有什么方法可以检测是否使用了 Chrome 的内置翻译？
【问题讨论】：
其实我也对这个感兴趣。你知道怎么做吗？ @whitehawk 看到我在下面添加的评论 Google Chrome 和 Microsoft Edge 使用 JavaScript 来翻译页面，这在任何地方都可能有帮助，也可能没有帮助。如果我关闭网页的 JavaScript，页面将不会被翻译。不确定这是否正常且众所周知，所以我想我还是会写它（我认为它可以用 C/C++ 或其他方式在页面外部完成）。 【参考方案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);
【讨论】：
不完全是我所做的，但它是最接近的解决方案。我使用 jQuery resize 插件benalman.com/projects/jquery-resize-plugin 来检测菜单的大小变化，而不是检测变化的内容。 有趣的是，对于谷歌浏览器的内置翻译功能，似乎只有第三种和第四种方法有效。我还假设translated-ltr 可以是 translated-rtl 取决于被翻译成什么语言。不过，考虑到您只使用类名，我仍然会有点犹豫——这很容易变成完全不同的东西。
还将 class=notranslate 添加到任何 HTML 元素以防止该元素被翻译，请参阅 support.google.com/translate/?hl=en
只是想指出 notranslate 元标记仅适用于自动翻译，如果用户右键单击然后选择翻译为 [语言]，它将不起作用。但你是对的，''notranslate'' 类会阻止单个元素被翻译【参考方案2】：
我知道这已经很晚了...而且它不是 JS 解决方案...但是如果您只需要能够确保在显示 Google 翻译栏时可以在页面上设置元素样式，您可以使用CSS。 Translate 代码在正文标签中添加了一个“translated-ltr”类（如果语言是从右到左而不是从左到右，如英语，则为“translated-rtl”）。
所以你可以使用 CSS 类：
.translated-ltr .nav, .translated-rtl .nav
根据需要为您的项目替换正确的类/ID。
希望这会有所帮助！
【讨论】：
【参考方案3】：截至 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），那么您需要跟踪具有文本内容的元素的更改，以查看它们是否确实已经翻译，同时还使用上面的代码设置一个标志来确定更改是翻译的结果，还是恢复到原始文本。
【讨论】：
【参考方案4】：我刚刚在谷歌浏览器、Yandex 浏览器和微软翻译扩展中写了一篇关于detecting automatic machine-translations 的文章。我还没有弄清楚如何检测 Naver Whale 浏览器，这是最后一个内置页面翻译功能的浏览器。
它的短小精悍是要注意以下 DOM 标记：
!!document.querySelector("html.translated-ltr, head.translated-rtl, ya-tr-span, *[_msttexthash]");
您可以从域名列表中检测基于 Web 的代理翻译服务（可在链接文章中找到。）
【讨论】：
以上是关于检测谷歌浏览器翻译的主要内容，如果未能解决你的问题，请参考以下文章