10

私は自分のサイトの1つで次のグーグル提供のコードでグーグル翻訳ウィジェットを使用しています：

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

<script>

私の問題：翻訳はページが読み込まれた後に実行されますが、主なナビゲーション要素の幅に基づいて自動サイズ設定するスクリプトもあります。

これは翻訳が完了する前に実行されるため、翻訳されていない英語のラベルに基づいてサイズが変更されます。翻訳によってナビゲーションの文言が変更されたら、ナビゲーション要素のサイズを変更して、新しく翻訳された単語に合わせる必要があります。これは、英語とはサイズ（幅）が異なる可能性があるためです。

コードを実行してプライマリナビゲーションのサイズを変更する前にGoogle翻訳コードを呼び出そうとしましたが、翻訳が非同期で実行されるため、翻訳が完了する前にコードが実行されます。

翻訳が完了したときに発生するコールバックイベント（または翻訳が完了したことを検出する何らかの方法）があるので、ナビゲーションのサイズを変更する前に待つことができますか？

また、ページの翻訳が完了した後でスクリプトを実行する必要があります。

4

3 に答える 3

6

これが私が最終的に使用した修正です：

jQuery(function(){
    firstMenu = $("#nav li:first").text();

    setTimeout(waitNav, 500);
});

function waitNav() {

    if (firstMenu != $('#nav li:first').text()) {

        initNav();
        firstMenu = $('#nav li:first').text();
        setTimeout(waitNav, 500);

    }
    else {
        setTimeout(waitNav, 500);
    }

}

基本的に、既知のテキストが変更されたかどうかを確認し続けます (この場合、ナビゲーション ブロックの最初の項目です)。

変更された場合は、トランスレータが実行されたことを意味し、翻訳後に実行する必要があるコードを実行します (ここでは initNav())。

ユーザーが別の言語を選択した場合に備えて、変更をチェックし続けます。

完璧ではありませんが、私にとってはうまくいきます:-)

于 2012-10-15T15:46:05.467 に答える
1

次のような変更を検出できます。

$('#some-translatable-element').bind('DOMSubtreeModified', function() {
  yourCallback();
});

欠点は、Google 翻訳がプロセスで複数の変更を行うため、イベントが複数回発生することです。

ページの最後の要素の変更を検出することをお勧めします。これにより、上記のすべての要素が翻訳されていることがわかります。

于 2014-12-01T08:49:08.733 に答える