4

我的页面上有谷歌翻译。它看起来像一个下拉列表，但我页面上的所有其他下拉列表都有另一种样式。所以我创建了 jQuery 函数来改变谷歌翻译下拉列表样式。该函数添加或删除一些样式参数。我想知道什么时候应该调用这个函数？在当前代码中，我在 3 秒后调用它。在 document.ready 之后

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

目前的情况是我隐藏了放置 Google 翻译的 Div，并在我的函数更正了它的样式后显示它。这意味着我的页面加载完毕，然后等待 3 秒，然后Google 翻译会以更正的样式出现。

我想知道如何确定 Google 翻译下拉菜单已加载，然后调用我的函数来更改样式。我不想让用户等待 3 秒（也许在某些情况下谷歌翻译会加载超过 3 秒，然后我的函数将永远不会被执行）。

4

3 回答 3

6

我最近想将“选择语言”更改为简单的“语言”，所以我还必须在执行 Google 的代码后运行代码。我是这样做的：

HTML

div将 Google 设置为很重要display:none——我们将使用 JavaScript 将其淡入，这样用户就不会看到文本从“选择语言”切换到“语言”。

<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 文档中说，您可以在 HTML 元素中添加一个属性，该属性作为参数，当元素加载时要执行的 JavaScript 代码。

问题是，该属性仅支持以下几个元素：-

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

所以，我建议使用<iframe>or <frame。它现在应该看起来像这样：

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

或者，你可以用 jQuery 试试这个：

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

这是jQueryload方法的文档

于 2012-11-14T17:12:06.513 回答