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

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

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

Ответ 1

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

UPDATE

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

два элемента script для тега head
глобальный объект 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);

Ответ 2

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

Итак, вы можете использовать CSS classess, например:

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

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

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

Ответ 3

Я только что написал статью о обнаружении автоматических машинных переводов в Google Chrome, браузере Яндекса и расширении Microsoft Translate. Я еще не выяснил, как обнаружить браузер Naver Whale, который является последним браузером со встроенной функцией перевода страниц.

Короче говоря, он следит за следующими маркерами DOM:

!!document.querySelector("html.translated-ltr, head.translated-rtl, ya-tr-span, *[_msttexthash]");

Вы можете обнаружить веб-службы перевода прокси-серверов из списка доменных имен (см. в связанной статье).