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

Question

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

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

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

Answer 2

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

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

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

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

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