google.translate.TranslateElementの結果から要素を変更する

Question

非常に便利なGoogle Translateの翻訳要素を超シンプルで効果的なWebページに埋め込むことを試みていますが、結果として表示されるデフォルトのテキストを変更する必要がありますHTML：

グーグルAPIsand JSライブラリの数で働いた、私はそれがほぼ確実に設定可能なように、これは問題はないと考えましたが、私はいずれかを見つけることができないいくつかの時間のために周りを見回しましたあなたがこれを設定しようとしているプロパティへの参照、そして一般的なドキュメントは哀れなようです。基本的なコードは次のとおりです。

私はそれをハックし、それが持っていた後だけで結果のHTMLを変更する onDOMNodeInsertedリスナーを使用することにしました translatorを作成するときでプロパティとしてこれを設定することができるというdispairedた

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

<div id="google_translate_element"></div>にロードされます。ここではjQueryを使用していますので、私のコードは

$(document).ready(function(){ 
    $('#google_translate_element').bind('DOMNodeInserted', function(event) { 
     $('.goog-te-menu-value span:first').html('Translate'); 
    }); 
}) 

です。興味深いのはここです。 Chromeはすべてを完全に読み込み、innerHTML置換を美しく行います。 Internet Explorer（8）はDOMNodeInsertedリスナーを完全に無視し、ページはjQuery関数が呼び出されなかったかのように読み込まれます。 Firefox（10）は正常に読み込まれているように見えますが（translate要素が一切ない）、フリーズしてメモリを突っ走り始め、クラッシュします。

このinnerHTML置換をどのように動作させることができるかについての考えはありますか？あなたがdisplayLabel : "Translate"のようなプロパティが気に入っているのは当然のことですが、それはできません（そして実際には醜いsetTimeoutハック）。これを動作させる方法はありますか？

Answer 1

あなたのように私はinit paramsでガジェットをカスタマイズする方法を見つけることができませんが、独自のカスタマイズされたガジェットをHTMLに書き込んでg.translate機能を呼び出すことが可能です。 http://www.toronto.ca/（page footer）を参照してください。それがどうやって起こったかを正確に見るためには、もう少し掘り下げなければならないのではないかと心配しています。

このg.translateの使用は、hereとも呼ばれます。残念ながら、議論はかなり古くなっていますが、うまくいけばなおさらです。

Answer 2

翻訳モジュールがまだページに読み込まれていない場合、3msごとにチェックするこのコードを使用しています。そうであれば、それはテキストを更新し、後に間隔チェックをクリアする。

function cleartimer() {  
    setTimeout(function(){ 
     window.clearInterval(myVar); 
    }, 1000);    
} 
function myTimer() { 
    if ($('.goog-te-menu-value > span:first-child').length) { 
     $('.goog-te-menu-value > span:first-child').html('Translate'); 
     cleartimer(); 
    } 
} 
var myVar = setInterval(function(){ myTimer() }, 300); 

Answer 3

CSSを使用して行うことはできますが、言語を選択してもラベルは変更されません。

#google_translate_element .goog-te-gadget-simple .goog-te-menu-value span:first-child{display: none;} 
 
#google_translate_element .goog-te-gadget-simple .goog-te-menu-value:before{content: 'Translate'}