2016-06-30 7 views
3

Ich habe das Google Übersetzer-Plugin auf meiner Webseite hinzugefügt. Wie kann ich einen Rückruf zu meiner JavaScript-Funktion erhalten, wenn der Benutzer eine Sprache aus dem Dropdown-Menü auswählt, die das Plugin meiner Webseite hinzufügt? Die Google Translate API-Dokumentation scheint darüber keine Informationen zu enthalten. Ich habe den JavaScript-Code des Google Übersetzer-Plugins gelesen und kann nichts sehen, was hilfreich ist.Google Translate: Rückruf, wenn eine Sprache ausgewählt ist

Es ist auch in Ordnung, wenn ich einen Rückruf zu meiner Funktion bekomme, kurz bevor die Übersetzung meiner Webseite beginnt oder kurz nachdem die Übersetzung meiner Webseite endet oder kurz vor oder nach der Übersetzung eines bestimmten Elements in meinem Web Seite. Hier

ist der HTML-Code für eine vereinfachte Version meiner Webseite:

<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> 

Antwort

0

Von this SO Frage, dieser Code zu arbeiten 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

Das mag funktionieren, aber ich würde es vorziehen, es nicht zu verwenden, da es auf ID-Werten wie google-translate abhängt, über die ich keine Kontrolle habe. – Codigo

+0

@ Codigo Überprüfen Sie die Dokumentation von Google, aber ich bin mir ziemlich sicher, dass die DOM-IDs wie 'google-translate' statisch sind. – FelisPhasma

+0

Was ist' find (# google-translate ")'? Soll das ein jQuery-Aufruf sein? –

0

Hier eine Lösung ist, aber ich bin nicht sicher, ob es mir so gefällt. Im Wesentlichen überprüfen Sie, ob sich der Text oder die Seite geändert hat, wenn Sie danach handeln.

Google Translate Widget - Translation complete callback

+0

Link-Only-Antworten sind nicht wertvoll. Dies sollte ein Kommentar sein, da er auf eine bestehende SO-Antwort verweist. –

5

Danke für die Antworten. Auf der Grundlage der Antworten und Kommentare in den SO-Fragen, auf die in den obigen Antworten Bezug genommen wird, habe ich den unten stehenden Code zusammengetragen, der für mich funktioniert.

Ich habe ein verstecktes div und einen Listener für sein DOMsubtreeModified-Ereignis hinzugefügt. Der Hörer wird angerufen, wenn Google den Inhalt des versteckten div übersetzt. Der Listener wird jedoch mehrmals für jedes Mal aufgerufen, wenn im Drop-down-Menü des Plugins eine Sprache ausgewählt wird. Google scheint mehrere Durchgänge zu machen. Der ursprüngliche Wert von innerHTML scheint in allen Durchgängen mit Ausnahme der letzten als Teilstring beibehalten zu werden. Daher überprüfe ich den originalen innerHTML-Teilstring im Event-Handler, um zu vermeiden, dass der Code mehrmals ausgeführt wird.

Wählen Sie einen Initialwert für das innerHTML, der für jede Sprache im Dropdown-Menü unterschiedlich ist. "Englisch" funktioniert in meinem Fall.

Verwandte Themen