Question

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

之后

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

目前的情况是我隐藏了Google翻译所在的Div，并在我的功能更正其样式后显示它。这意味着我的页面加载，然后等待3秒，然后然后 Google翻译出现更正的样式。

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

Answer 1

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

HTML

将Google的div设置为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();

Answer 2

我有类似的情况，我不得不改变“选择语言”只显示“语言”。这是我的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;
}

Answer 3

您可以使用纯JavaScript执行此操作。它在onLoad attribute的W3文档中说，您可以在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 method

的文档

如何确定Google翻译已加载？

3 个答案: