我已经将 Google 翻译栏添加到我们的网站，但是由于布局的工作原理，如果主导航上的翻译比英语长，则将一些链接向下推到下一行并开始覆盖其他元素。我有一些 Javascript 可以检测翻译栏是否正在使用，并使菜单和搜索框的包含 div 变宽以进行补偿，而这确实会影响布局，到目前为止，它比覆盖页面的一部分更可取。
然而，Chrome 现在已经翻译内置到浏览器中，如果有人使用这个，他们显然不会使用嵌入式版本，所以我无法检测到它来应用我的宽度修复。
24
也许尝试使用 js 来检测菜单内容是否已更改，然后应用新样式。
UPDATE当 Chrome 翻译页面时，它会向页面添加几个元素：
两个script元素到head标记
全局对象window.google
cl = "translated-ltr"tohtmltag
div id="goog-gt-tt"tobodytag
您可以查看 DOM 中的更改，以了解内容何时翻译：
document.addEventListener('DOMSubtreeModified', function (e) {
if(e.target.tagName === 'HTML' && window.google) {
if(e.target.clName.match('translated')) {
// page has been translated
} else {
// page has been translated and translation was canceled
}
}
}, true);
8
我知道这太晚了……这不是一个 JS 解决方案……但是，如果您只需要确保在显示 Google Translate 栏时可以对页面上的元素进行样式设置，则可以使用 CSS。Translate 代码在 body 标记中添加了一个类“translated-ltr”（如果语言是从右到左而不是像英语那样从左到右，则为“translated-rtl”）。
所以你可以使用 CSS 类：
.translated-ltr .nav, .translated-rtl .nav {}
根据需要替换正确的类 / ID 为您的项目。
希望这有帮助！
7
截至 2019 年，上面选择的答案似乎并不完全有效，但是我已经能够使用以下修改版本来跟踪<html>元素（document.documentElement）的类名更改翻译或使用“显示原始”时：
var observer = new MutationObserver(function (event) {
if(document.documentElement.clName.match('translated')) {
alert("Page translate");
} else {
alert("Page untranslate");
}
});
observer.observe(document.documentElement, {
attributes: true,
attributeFilter: ['cl'],
childList: false,
characterData: false
});
但是，重要的是要注意，这将在页面翻译开始时，在实际更改单个内容之前触发。
如果您需要执行一个取决于翻译文本特征的操作（例如，检查它现在是否溢出了 div），那么您需要跟踪具有文本内容的元素的更改，以查看它们是否已被翻译，同时还使用上面的代码设置一个标志来确定更改是翻译的结果，还是还原到原始文本。
4
我刚刚在 Google Chrome，Yandex Browser 和 Microsoft Translate Extension 中的detecting automatic machine-translations上写了一篇文章。我还没有弄清楚如何检测 Naver Whale 浏览器，这是最后一个具有内置页面翻译功能的浏览器。
它的简短和甜蜜正在关注以下 DOM 标记：
!!document.querySelector("html.translated-ltr, head.translated-rtl, ya-tr-span, *[_msttexthash]");
您可以从域名列表（在链接的文章中找到）中检测基于 Web 的代理翻译服务。
本站系公益性非盈利分享网址，本文来自用户投稿，不代表码文网立场，如若转载，请注明出处
![python循环遍历字典： title_content_list.append([key, value])print(ti](/titimg/mwenw_article_thumb_41689.jpg)
评论列表（10条）