如何爲您的網站異步加載Google Translate小部件？

Question

有沒有辦法爲你的網站異步加載Google Translate widget？

我試着把它放在我的頁面底部，但#google_translate_element容器仍然是空的。

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

看來你在代碼中有幾個問題。但你的基本想法是健全的。

假設<div id="google_translate_element"></div>是腳本標籤定義，下面應該工作：

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

至少它爲我工作，當我把它都在一個HTML文件並加載到瀏覽器。

當然，可以將var聲明和以下行放在$(document).ready函數中（或者如果您不使用jQuery，則以某種其他方式）。然後div和script之間的順序將不再是後果。