Wykrywanie tłumaczenia Google Chrome

Question

Dodałem Pasek Tłumaczeń Google do naszej strony internetowej, ale ze względu na sposób, w jaki układ działa, jeśli tłumaczenie na głównej nawigacji jest dłuższe niż angielski powoduje przesunięcie niektórych linków w dół do następnego wiersza i zaczyna zasłaniać inne elementy. Mam trochę kodu JavaScript, który wykrywa, czy pasek tłumaczenia jest w użyciu, i sprawia, że ​​zawierający go element div dla menu i pola wyszukiwania jest szerszy, aby to zrekompensować, podczas gdy ma to wpływ na układ, zdecydowanie lepiej jest pokrywać części strony.

Jednak Chrome ma teraz wbudowane tłumaczenie w przeglądarce, jeśli ktoś go używa, to oczywiście nie będzie używać wersji wbudowanej, więc nie mogę go wykryć, aby zastosować moją poprawkę szerokości. Czy istnieje sposób sprawdzenia, czy używane jest wbudowane tłumaczenie Chrome?

Answer 1

Może spróbuj użyć js, aby sprawdzić, czy zawartość menu się zmieniła, a następnie zastosować nowe style.

UPDATE

Gdy Chrome przekłada stronę to dodaje kilka elementów na stronie:

• dwa script elementy do head tag
• globalny obiekt window.google
• class = "translated-ltr" do html tagu
• div id="goog-gt-tt" do body tag

Można obserwować zmiany w DOM, aby dowiedzieć się, kiedy zawartość jest tłumaczone:

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

wiem, że to jest sposób późno ... i nie jest to rozwiązanie JS .. ale jeśli po prostu musisz umieć stylować elementy na swojej stronie, gdy wyświetlany jest pasek Tłumacz Google, możesz użyć CSS. Kod Tłumacz dodaje klasę "translated-ltr" (lub "translated-rtl", jeśli język jest od prawej do lewej, a nie od lewej do prawej, jak angielska) do znacznika body.

Więc można użyć CSS classess jak:

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

zastąpienie prawidłowego klasa/identyfikator dla przedmiotów, ile potrzeba.

Mam nadzieję, że to pomoże!