文章/答案/技术大牛

发布

社区首页 >问答首页 >如何确定谷歌翻译是否已加载？

问如何确定谷歌翻译是否已加载？
EN

Stack Overflow用户

提问于 2012-11-14 17:07:20

回答 3查看 4.5K关注 0票数 4

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

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

目前的情况是，我隐藏的分区，谷歌翻译是放置，并显示在它的样式被我的功能纠正。这意味着我的页面加载，然后等待3秒，然后谷歌翻译出现与纠正样式。

我想知道如何确定Google翻译下拉列表已经加载，然后调用我的函数来更改样式。我不想让用户等待3秒(也许在某些情况下Google翻译会加载超过3秒，那么我的函数就永远不会被执行)。

load

javascript

jquery

events

回答 3

Stack Overflow用户

回答已采纳

发布于 2012-12-06 18:11:50

最近我想把“”改为" Language“，所以在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();

票数 6

Stack Overflow用户

发布于 2016-06-23 01:21:44

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

票数 1

Stack Overflow用户

发布于 2012-11-14 17:12:06

您可以使用纯JavaScript来完成它。它说，在W3文档中，您可以在 attribute元素中添加一个属性，该属性以元素加载后要执行的JavaScript代码作为参数。

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

<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的 method文档

票数 -2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/13383647

复制

相似问题

问如何确定谷歌翻译是否已加载？
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何确定谷歌翻译是否已加载？EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何确定谷歌翻译是否已加载？
EN