方式异步加载谷歌翻译小部件为您的网站

Way to asynchronously load Google Translate widget for your website?

本文关键字：网站 小部 异步 加载 谷歌 翻译 方式      更新时间：2023-09-26

是否有一种方法可以异步加载谷歌翻译小部件为您的网站?

我试着把这个放在我的页面底部，但是#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>

看来你的代码有几个问题。但是你的基本想法是正确的。

假设<div id="google_translate_element"></div>是在script标签之前定义的，那么下面的代码应该可以工作:

<!-- 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文件中并加载到chrome中时，它对我有效。

当然，可以将var声明和以下行放在$(document).ready函数中(或者如果不使用jQuery，可以以其他方式)。那么div和script之间的顺序就不再重要了。

相关文章：