Cha*_*hao 14 javascript translation google-chrome
我已经将谷歌翻译栏添加到我们的网站,但由于主导航中的翻译比英语长,所以布局如何工作将一些链接推到下一行并开始掩盖其他元素.我有一些Javascript检测翻译栏是否正在使用,并使菜单和搜索框的包含div更宽,以补偿,虽然这确实影响布局,它远远优于覆盖页面的部分.
但是Chrome现在已经内置了浏览器的翻译,如果有人使用它,他们显然不会使用嵌入式版本,所以我无法检测到它来应用我的宽度修复.有没有办法检测Chrome的内置翻译是否被使用？
mx0*_*mx0 18
也许尝试使用js来检测菜单内容是否已更改,然后应用新样式.
UPDATE
当Chrome翻译页面时,它会向页面添加多个元素:
script要head标记的两个元素window.googleclass = "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);
Ste*_*n G 10
截至 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），那么您需要跟踪具有文本内容的元素的更改以查看它们是否实际上已被翻译，而还使用上面的代码设置一个标志来确定更改是翻译的结果还是恢复到原始文本。
小智 6
我知道这太晚了……而且它不是 JS 解决方案……但是如果您只需要确保在显示 Google 翻译栏时可以为页面上的元素设置样式，则可以使用 CSS。Translate 代码在 body 标签中添加了一类“translated-ltr”（如果语言是从右到左而不是像英语那样从左到右，则为“translated-rtl”）。
所以你可以使用 CSS 类，例如：
.translated-ltr .nav, .translated-rtl .nav {}
根据需要为您的项目替换正确的类/ID。
希望这可以帮助！
我刚刚写了一篇关于检测Google Chrome、Yandex 浏览器和 Microsoft Translate Extension 中的自动机器翻译的文章。我还没有弄清楚如何检测 Naver Whale 浏览器，这是最后一个具有内置页面翻译功能的浏览器。
\n\n简而言之，就是要注意以下 DOM 标记：
\n\n!!document.querySelector("html.translated-ltr, head.translated-rtl, ya-tr-span, *[_msttexthash]");\n您可以从域名列表中检测基于 Web 的代理翻译服务（可在链接的文章中找到）。
\n