4

私のページにはGoogle翻訳があります。ドロップダウンリストのように見えますが、私のページの他のすべてのドロップダウンリストには別のスタイルがあります。そこで、Google翻訳のドロップダウンリストのスタイルを変更するjQuery関数を作成しました。この関数は、いくつかのスタイルパラメータを追加または削除します。この関数をいつ呼び出すべきか知りたいですか？現在のコードでは、3秒後に呼び出します。document.readyの後

  $(document).ready(function () {
      setTimeout(wrapGoogleTranslate, 3000);
  });

現在の状況では、Google翻訳が配置されているDivを非表示にし、関数によってスタイルが修正された後に表示します。これは、ページが読み込まれ、3秒間待機してから、 Google翻訳が修正されたスタイルで表示されることを意味します。

Google翻訳のドロップダウンが読み込まれたことを確認し、関数を呼び出してスタイルを変更する方法を知りたいのですが。ユーザーを3秒待たせたくありません（状況によっては、Google翻訳が3秒を超えて読み込まれ、関数が実行されない場合があります）。

4

3 に答える 3

6

最近、「言語の選択」を単に「言語」に変更したかったので、Googleのコードが実行された後にコードを実行する必要もありました。これが私がそれをした方法です：

HTML

Googleをに設定することが重要ですdiv。JavaScriptdisplay:noneでフェードインして、ユーザーが「言語の選択」から「言語」に切り替わるテキストを表示しないようにします。

<div id="google_translate_element" style="display:none;"></div>
<script type="text/javascript">function googleTranslateElementInit() {new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, gaTrack: true, gaId: 'UA-35158556-1'}, 'google_translate_element');}</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

JavaScript

function changeLanguageText() {
  if ($('.goog-te-menu-value span:first-child').text() == "Select Language") {    
    $('.goog-te-menu-value span:first-child').html('Language');
    $('#google_translate_element').fadeIn('slow');
  } else {
    setTimeout(changeLanguageText, 50);
  }
}
changeLanguageText();
于 2012-12-06T18:11:50.910 に答える
1

同様の状況で、「言語の選択」を「言語」だけを表示するように変更する必要がありました。これが私のCSSソリューションです：

div#google_translate_element{
  display: inline-block;
  vertical-align: top!important;
}

div#google_translate_element *{
  margin: 0px;
  padding: 0px;
  border: none!important;
  display: inline-block;
  vertical-align: top!important;
}

div#google_translate_element .goog-te-gadget-icon{
  display: none;
}

div#google_translate_element .goog-te-menu-value{
  color: #899290;
}

div#google_translate_element .goog-te-menu-value:hover{
  color: #a6747e;
}

div#google_translate_element .goog-te-menu-value *{
  display: none;
}

div#google_translate_element .goog-te-menu-value span:nth-child(3){
  display: inline-block;
  vertical-align: top!important;
}

div#google_translate_element .goog-te-menu-value span:nth-child(3)::after{
  content: "Language"!important;
}
于 2016-06-23T01:21:44.843 に答える
-2

あなたは純粋なJavaScriptでそれを行うことができます。onLoad 属性のW3ドキュメントには、要素がロードされたときに実行されるJavaScriptコードをパラメーターとして受け取るHTML要素に属性を追加できると記載されています。

問題は、属性がサポートされているのは次のいくつかの要素のみであるということです。-

  • <body>
  • <frame>
  • <frameset>
  • <iframe>
  • <img>
  • <input type="image">
  • <link>
  • <script>
  • <style>

したがって、<iframe>またはを使用することをお勧めし<frameます。これで、次のようになります。

<frame onLoad="wrapGoogleTranslate();" />

または、jQueryでこれを試すことができます：

$("div#googleTranslateWrapper").load(function() {
  setTimeout(wrapGoogleTranslate, 3000);
});

これがjQueryのloadメソッドのドキュメントです

于 2012-11-14T17:12:06.513 に答える