Sposób asynchronicznego ładowania widgetu Tłumacz Google na swoją stronę?

Question

Czy istnieje sposób na asynchroniczne ładowanie widżetu Tłumacz Google na swoją stronę?

Próbowałem umieścić to na dole mojej strony, ale kontener #google_translate_element był nadal pusty.

<!-- Asynchronous Google Translate --> 
<script type="text/javascript"> 
function googleTranslateElementInit() { 
    new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'ar,bg,bn,de,el,eo,es,en,fr,hi,id,it,iw,ja,ko,pl,pt,ru,th,tr,vi,zh-CN', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, gaTrack: true, gaId: 'UA-1234-1'}, 'google_translate_element'); 
} 

(function() { 
    var googleTranslateScript = document.createElement('script'); 
    googleTranslateScript.type = 'text/javascript'; 
    googleTranslateScript.async = true; 
    googleTranslateScript.src = '//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit'; 
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(googleTranslateScript); 
})(); 
</script> 

Answer 1

Wygląda na to, że masz kilka problemów w swoim kodzie. Ale twoim podstawowym pomysłem jest dźwięk.

Zakładając, że <div id="google_translate_element"></div> jest zdefiniowana przed tagiem skrypt dodaje powinno działać:

<!-- Asynchronous Google Translate --> 
<script type="text/javascript"> 
    function googleTranslateElementInit() { 
    new google.translate.TranslateElement({pageLanguage: 'en', 
     includedLanguages: 'ar,bg,bn,de,el,eo,es,en,fr,hi,id,it,iw,ja,ko,pl,pt,ru,th,tr,vi,zh-CN', 
     layout: google.translate.TranslateElement.InlineLayout.SIMPLE, 
     gaTrack: true, gaId: 'UA-37652767-1'}, 'google_translate_element'); 
    } 

    var googleTranslateScript = document.createElement('script'); 
    googleTranslateScript.type = 'text/javascript'; 
    googleTranslateScript.async = true; 
    googleTranslateScript.src = 'http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit'; 
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(googleTranslateScript); 
</script> 

Przynajmniej pracował dla mnie, kiedy to wszystko umieszczone w pliku HTML i ładowane do Chrome.

Oczywiście byłoby możliwe umieszczenie deklaracji var i następujących linii w funkcji $(document).ready (lub w inny sposób, jeśli nie używasz jQuery). Wtedy zamówienie między div i script nie będzie już miało znaczenia.