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

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

введите здесь описание изображения

Поработав с несколькими библиотеками Google API и 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) загружается нормально (но вообще без элемента перевода), а затем зависает, начинает потреблять память и вылетает.

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


javascript jquery google-translate dom-node
person Ben D    schedule 16.02.2012    source источник

Ответы (3)


arrow_upward
2
arrow_downward

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

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

person Beetroot-Beetroot    schedule 16.02.2012
comment
Это может быть подход, который я в конечном итоге выберу, но все, что они делают, это перенаправляют пользователя на сайт Google Translate вместе с информацией о языке и URL-адресе. Если бы я мог, я бы предпочел, чтобы люди оставались на моем сайте. В любом случае спасибо за помощь - person Ben D; 16.02.2012
comment
Бен, следующая страница, прямо внизу, включает обработчик DOMNodeInserted с некоторой дополнительной безопасностью. Это все еще не совсем то, что вы ищете, но может дать дополнительную информацию. code.google.com/ p/socialtranslate/source/browse/trunk/ - person Beetroot-Beetroot; 16.02.2012

arrow_upward
2
arrow_downward

Вы можете сделать это с помощью 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'}

person user2428593    schedule 19.09.2017
comment
Это был самый простой метод, и он не вызывал ошибку jQuery RangeError: превышен максимальный размер стека вызовов. - person Bryan Hoffman; 01.12.2020

arrow_upward
1
arrow_downward

Я использую этот код, который проверяет каждые 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);
person Loved    schedule 15.12.2016