检测Google Chrome翻译 [英] Detecting Google Chrome Translation

问题描述

我已将Google翻译栏添加到我们的网站，但由于主要导航上的翻译比英语更长，因此布局会如何工作，因此会将某些链接推向下一行并开始掩盖其他元素。我有一些Javascript检测翻译栏是否在使用中，并使菜单和搜索框中包含的div更宽以弥补，但这确实影响了布局，因此它最好覆盖页面的一部分。 可能试着用js检测菜单内容是否有然后应用新的样式。
$ b 更新

当Chrome翻译页面它会在页面中添加几个元素：

• 两个脚本元素到标签


• 全局对象 window.google


• class =translated-ltr to html 标记


• div id =goog-gt-tt to body tag



您可以观察DOM中的变化以找出内容翻译的时​​间：

  document.addEventListener（'DOMSubtreeModified'，function（e）{
 if（e.target.tagName ==='HTML'&& window.google）{
 if（e.target.className .match（'translated'））{
 //页面已被转换
} else {
 //页面已被翻译并且翻译已被取消
} 
} 
}，true）; 
  

I've added the Google Translation Bar to our website but due to how the layout works if the translation on the main navigation is longer than English is pushes some links down to the next row and starts to cover up other elements. I've got some Javascript that detects if the translation bar is in use and makes the containing div for the menu and search box wider to compensate, while this does affect the layout it is by far preferable to covering parts of the page.

However Chrome now has translation built in to the browser, if someone uses this they obviously won't be using the embedded version and so I can't detect it to apply my width fix. Is there any way to detect if Chrome's built in translation is being used?

解决方案

Maybe try using js to detect if menu content has changed and then apply new styles.

UPDATE

When Chrome translates a page it adds several elements to a page:

• two script elements to head tag
• global object window.google
• class = "translated-ltr" to html tag
• div id="goog-gt-tt" to body tag

You can watch for changes in DOM to find out when content is translated:

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);

这篇关于检测Google Chrome翻译的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！