Question

点击按钮后，我需要加载并显示Google翻译小部件。怎么做？

<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'en',
    layout: google.translate.TranslateElement.InlineLayout.SIMPLE
  }, 'google_translate_element');
}
</script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

顺便说一下：他们在 // translate.google.com 中使用的 // 网址是什么？

Answer 1

您可以使用类似的东西加载法语工具栏：

<a href="http://www.google.com/translate?sl=auto&tl=fr&u=http%3A%2F%2Fexample.com%2F'><img src="button.png" border="0"></a>

Answer 2

如果您使用的是jQuery，可以在google_translate_element中添加一个按钮，并使用getScript从Google加载翻译脚本，并仅在点击该按钮后运行googleTranslateElementInit函数。

$("#google_translate_element button").click(function(){
    $(this).hide();
    var url = "//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit";
    $.getScript(url);   
});

维护原始问题中显示的代码，但删除<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>，因为这是您要在页面加载时禁止的内容，并在按钮单击时启动。

如果您想在google_translate_element之外的其他位置添加按钮，则必须调整或删除上述代码的$(this).hide();部分。

这会在页面加载上节省大量时间，因为Google翻译脚本需要花费大量时间才能加载。以这种方式使用它可以避免在默认情况下加载它，并且仅在用户请求时添加它。

单击按钮后显示Google翻译小部件

2 个答案: