2016-06-30 5 views
3

Я добавил плагин Google Translate на свою веб-страницу. Как я могу получить обратный вызов моей функции JavaScript, когда пользователь выбирает язык из раскрывающегося меню, которое плагин добавляет к моей веб-странице? Документация API Google Translate не содержит никакой информации об этом. Я прочитал код JavaScript плагина Google Translate, и я не вижу ничего полезного.Google Translate: Обратный звонок при выборе языка

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

Вот HTML для упрощенной версии моего веб-страницы:

<html> 
    <head> 
    </head> 

    <body> 

     <!-- Google Website Translator plugin --> 

     <div id="google_translate_element"></div><script type="text/javascript"> 
     function googleTranslateElementInit() { 
      new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'es', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element'); 
     } 
     </script> 
     <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script> 


     <div> 
      <p>This part can be translated using the Google Translator plugin.</p> 
     </div> 

     <script type="text/javascript"> 
      function translationCallback() { 
       // This function needs to be called when Google translates this web page. 
       alert("A language was selected from the Google Translator plugin dropdown"); 
      } 
     </script> 
    </body> 
</html> 

ответ

0

С this SO вопрос, этот код apears работать:

var $textfield = find("#google-translate"); 
var $popup = find("#google_translate_element"); 
var $select = $popup.find("select"); 

$textfield.click(function() { 
    $popup.fadeIn("fast"); 
    return false; 
}); 

$select.bind("change", function() { 
    $popup.fadeOut("fast"); 
}); 
+0

Это может сработать, но я бы предпочел не использовать его, поскольку он зависит от значений id, таких как google-translate, над которыми у меня нет контроля. – Codigo

+0

@Codigo Проверьте документацию Google, однако я уверен, что идентификаторы DOM, такие как 'google-translate', являются статическими – FelisPhasma

+0

Что такое' find ("# google-translate") '? Это предназначено для вызова jQuery? –

0

Вот одно решение, но я Не уверен, что мне это очень нравится. По существу, вы проверяете, изменился ли текст или страница, когда вы это делаете.

Google Translate Widget - Translation complete callback

+0

Ответы только на ссылку не ценны. Это должен быть комментарий, поскольку он указывает на существующий ответ SO. –

5

Спасибо за ответы. Основываясь на ответах и ​​комментариях в вопросах SO, упомянутых в приведенных выше ответах, я объединил код, ниже которого работает для меня.

Я добавил скрытый div и слушатель для своего события DOMSubtreeModified. Слушатель вызывается, когда Google переводит содержимое скрытого div. Однако слушатель вызывается несколько раз за каждый раз, когда язык выбирается из выпадающего меню плагина. Кажется, что Google делает несколько проходов. Исходное значение innerHTML, по-видимому, сохраняется как подстрока во всех проходах, кроме последнего. Поэтому я проверяю исходную внутреннюю подстрокуHTML в обработчике событий, чтобы избежать выполнения кода несколько раз.

Выберите начальное значение для внутреннегоHTML, которое отличается для каждого языка в раскрывающемся меню. «Английский» работает в моем случае.

<html> 
    <head> 
    </head> 

    <body> 

     <!-- Google Website Translator plugin --> 

     <div id="google_translate_element"></div><script type="text/javascript"> 
     function googleTranslateElementInit() { 
      new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'es', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element'); 
     } 
     </script> 
     <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script> 


     <div> 
      <p>This part can be translated using the Google Translator plugin.</p> 
     </div> 

     <div id="translationDetector" style="display:none;">English</div> 

     <script type="text/javascript"> 

      var origValue = document.getElementById("translationDetector").innerHTML; 

      document.getElementById("translationDetector").addEventListener("DOMSubtreeModified", translationCallback, false); 

      function translationCallback() { 
       // This function needs to be called when Google translates this web page. 

       var currentValue = document.getElementById("translationDetector").innerHTML; 

       if (currentValue && currentValue.indexOf(origValue) < 0) { 
        origValue = currentValue; 
        alert("There is a disturbance in the force: " + currentValue); 
       } 
      } 
     </script> 
    </body> 
</html> 
Смежные вопросы