Detectando traducción Google Chrome

Question

He añadido la barra de traducción de Google a nuestro sitio web pero debido a cómo funciona el diseño si la traducción en la navegación principal es más larga que el inglés empuja algunos enlaces hasta la siguiente fila y comienza a cubrir otros elementos Tengo un Javascript que detecta si la barra de traducción está en uso y hace que el div que contiene para el menú y el cuadro de búsqueda sean más anchos para compensar, mientras que esto afecta el diseño, es preferible que cubra partes de la página.

Sin embargo, Chrome ahora tiene la traducción integrada en el navegador, si alguien utiliza esto obviamente no usará la versión incrustada y por lo tanto no puedo detectar que aplique mi corrección de ancho. ¿Hay alguna forma de detectar si se está utilizando la traducción integrada de Chrome?

Answer 1

Quizás intente usar js para detectar si el contenido del menú ha cambiado y luego aplicar nuevos estilos.

ACTUALIZACIÓN

Cuando Chrome traduce una página que añade varios elementos de una página:

• dos script elementos para head etiqueta
• objeto global window.google
• class = "translated-ltr" a html etiqueta
• div id="goog-gt-tt" a body etiqueta

Usted puede ver los cambios en DOM para averiguar cuando el contenido se traduce:

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

Sé que esto es así tarde ... y no es una solución JS .. .pero si solo necesita poder asegurarse de que pueda darle estilo a los elementos en su página cuando se muestre la barra Google Translate, puede usar CSS. El código de traducción agrega una clase de "traducido-ltr" (o "traducido-rtl" si el idioma es de derecha a izquierda y no de izquierda a derecha como en inglés) a la etiqueta de cuerpo.

Así se puede utilizar como classess CSS:

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

sustitución de la clase correcta/Identificación de los elementos según sea necesario.

Espero que esto ayude!