如何确定Google翻译已加载?

时间:2012-11-14 17:07:20

标签: javascript jquery events load

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

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

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

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

3 个答案:

答案 0 :(得分:6)

我最近想将“选择语言”更改为“语言”,因此我还必须在执行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();

答案 1 :(得分: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;
}

答案 2 :(得分:-2)

您可以使用纯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

的文档