点击按钮后显示谷歌翻译小部件

Display Google translate widget after button click

本文关键字：翻译 小部 谷歌 显示 按钮      更新时间：2023-09-26

单击按钮后，我需要加载并显示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中使用的/URL是什么？

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

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

如果您使用的是jQuery，您可以在google_translate_element中添加一个按钮，并使用getScript从谷歌加载翻译脚本，只有在单击该按钮后才能运行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();部分。

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

相关文章：