Изменение элемента из результатов google.translate.TranslateElement - PullRequest
Новая
       5

Изменение элемента из результатов google.translate.TranslateElement

2 голосов
/ 16 февраля 2012

Я пытаюсь встроить очень удобный элемент Google Translate translate в веб-страницу, которая очень проста и отлично работает, но мне нужно изменить текст по умолчанию, который отображается в полученном HTML:

enter image description here

Поработав с несколькими API-интерфейсами Google и библиотеками js, я подумал, что это не составит проблемы, поскольку почти наверняка его можно будет настроить, но, посмотрев некоторое время, я не могу найти никакой ссылки насвойство, которое позволяет вам установить это, и документация в целом кажется жалкой.Базовый код: 

<div id="google_translate_element"></div>
<script>
   function googleTranslateElementInit() {
      var translator = new google.translate.TranslateElement({
      pageLanguage: 'en',
      autoDisplay: false,
      multilanguagePage: false,
      layout: google.translate.TranslateElement.InlineLayout.SIMPLE
   }, 'google_translate_element');
}
</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

Не имея возможности установить его как свойство в момент создания translator, я решил взломать его и использовать прослушиватель onDOMNodeInserted, чтобы просто изменитьполученный HTML-код после загрузки в <div id="google_translate_element"></div>.Я использую jQuery здесь, поэтому мой код: 

$(document).ready(function(){
   $('#google_translate_element').bind('DOMNodeInserted', function(event) {
       $('.goog-te-menu-value span:first').html('Translate');
   });
})

И вот тут все становится интересным.Chrome прекрасно загружает все и прекрасно выполняет замену innerHTML.Internet Explorer (8) полностью игнорирует прослушиватель DOMNodeInserted, и страница загружается, как если бы функция jQuery никогда не вызывалась.Firefox (10) загружается нормально (но без элемента translate), а затем зависает, начинает сжимать память и вылетает.

Есть какие-нибудь мысли о том, как заставить эту замену innerHTML работать?Если вам известно о displayLabel : "Translate" -подобном свойстве, которое, конечно, предпочтительнее, но, за исключением этого (и действительно безобразного setTimeout хака), есть ли способ заставить это работать?

Ответы [ 3 ]

2 голосов
/ 16 февраля 2012

Как и вы, я не могу узнать, как настроить гаджет с помощью параметров инициализации, но представляется возможным написать свой собственный гаджет в HTML, а затем вызвать на нем функциональность g.translate. См. http://www.toronto.ca/ (нижний колонтитул страницы). Боюсь, вам придется еще покопаться, чтобы точно узнать, как это делается.

На это использование g.translate также ссылаются здесь . К сожалению, дискуссия довольно старая, но, надеюсь, все еще актуальна.

1 голос
/ 19 сентября 2017

Вы можете сделать это с помощью CSS, только это не изменит метку при выборе языка. 

#google_translate_element .goog-te-gadget-simple .goog-te-menu-value span:first-child{display: none;}
#google_translate_element .goog-te-gadget-simple .goog-te-menu-value:before{content: 'Translate'}
0 голосов
/ 15 декабря 2016

Я использую этот код, который каждые 3 мс проверяет, загружен ли на страницу модуль перевода; если это так, то он обновляет текст и очищает проверку интервала после. 

function cleartimer() {     
    setTimeout(function(){ 
        window.clearInterval(myVar); 
    }, 1000);             
}
function myTimer() {
    if ($('.goog-te-menu-value > span:first-child').length) {
        $('.goog-te-menu-value > span:first-child').html('Translate');
        cleartimer();
    }
}
var myVar = setInterval(function(){ myTimer() }, 300);
...