Обнаружение перевода Google Chrome

Question

Я добавил панель перевода Google на наш веб-сайт, но из-за того, как работает макет, если перевод в основной навигации длиннее английского, он выталкивает некоторые ссылки в следующую строку и начинает скрывать другие элементы.У меня есть некоторый Javascript, который определяет, используется ли панель перевода, и делает содержащийся div для меню и поля поиска шире, чтобы компенсировать это, хотя это действительно влияет на макет, который намного предпочтительнее, чем покрытие частей страницы.

Однако в Chrome теперь встроен перевод в браузер, и если кто-то использует его, он, очевидно, не будет использовать встроенную версию, и поэтому я не могу обнаружить его, чтобы применить мое исправление ширины.Есть ли способ определить, используется ли встроенный перевод Chrome?

Answer 1

Возможно, попробуйте использовать js, чтобы определить, изменилось ли содержимое меню, и затем применить новые стили.

ОБНОВЛЕНИЕ

Когда Chrome переводит страницу, он добавляет несколько элементов кстраница:

• два script элемента в head тег
• глобальный объект window.google
• class = "translated-ltr" в 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')) {
            // page has been translated
         } else {
            // page has been translated and translation was canceled
        }
   }
}, true);

Answer 2

Я знаю, что это слишком поздно ... и это не решение JS ... но если вам просто нужно убедиться, что вы можете стилизовать элементы на своей странице, когда отображается панель Google Translate, вы можете использовать CSS. Код Translate добавляет класс «translation-ltr» (или «translation-rtl», если язык справа налево, а не слева направо, как английский) к тегу body.

Таким образом, вы можете использовать CSS класс как:

.translated-ltr .nav, .translated-rtl .nav {}

при необходимости подставляя правильный класс / идентификатор для ваших предметов.

Надеюсь, это поможет!