2013-03-13 6 views
8

Gibt es eine Möglichkeit, das Google Translate-Widget für Ihre Website asynchron zu laden?Möglichkeit, Google Translate Widget für Ihre Website asynchron zu laden?

Ich habe versucht, dies auf der Unterseite meiner Seite, aber die #google_translate_element Container war noch leer.

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

Antwort

7

Es scheint, dass Sie mehrere Probleme in Ihrem Code haben. Aber deine Grundidee ist Klang.

Unter der Annahme, dass <div id="google_translate_element"></div> vor dem die Skript-Tag definiert wird, sollte folgende Arbeiten:

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

Zumindest ist es für mich gearbeitet, wenn ich das alles in einer HTML-Datei abgelegt und in Chrom geladen.

Natürlich wäre es möglich, die var Deklaration und die folgenden Zeilen in eine $(document).ready Funktion (oder auf eine andere Art und Weise, wenn Sie nicht jQuery verwenden) zu platzieren. Dann wäre die Reihenfolge zwischen div und script nicht mehr von Bedeutung.

+1

Danke. Kannst du meine Bearbeitung "peer review"? Ich verbesserte das src, um nur // eher als http: // zu sein. So funktioniert es auch mit HTTPS. Es ist ein netter Trick. – Geoff

+0

Ich habe den Rep noch nicht zu überprüfen, sonst würde ich. Ahh - '//' funktionierte nicht für mich, aber das war wahrscheinlich, weil ich es nicht auf einem Server hatte. – fredrik

+0

Das sieht wirklich gut aus! Ich würde jedoch aufgrund der IE-Unterstützung die Verwendung von Defer statt Async empfehlen. – Parris