javascript–检测GoogleChrome翻译

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

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

解决方法:

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

UPDATE

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

>头标记的两个脚本元素
>全局对象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);