ボタンをクリックして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> 

：それは彼らが//translate.google.comで使用されている// URLとは何ですか？

あなたはフランスのツールバーをロードするために、このようなものを使用することができ

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にボタンを追加し、Googleからの変換スクリプトをロードして実行するために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翻訳スクリプトの読み込みに時間がかかるため、ページの読み込みにかなりの時間を節約します。この方法でこれを使用すると、デフォルトでロードされることはなく、ユーザーが要求した場合にのみ追加されます。