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

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> 

BTW：与他们//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加入加载从谷歌翻译脚本并运行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翻译脚本需要大量时间加载，因此可以节省大量页面加载时间。以这种方式使用它可以避免在默认情况下加载它，并且只有在用户请求时才会添加。