Question

我最近遇到了在网页中添加一个GoogleTranslator小部件的问题。我做了一些调查显然Google不会在模板中允许多个GoogleTranslator小部件。

有没有人遇到过同样的问题？有什么解决方案吗？在响应式设计中，我需要复制一些块并以不同的顺序使用它们。

Answer 1

创建两个容器div - 一个用于您的＆＃34;普通＆＃34;布局，一个适合您的＆＃34;移动＆＃34;布局（或更多，取决于您正在做什么）。让小部件在＆＃34; normal＆＃34;内部开始。布局的容器。添加一些JavaScript来监听窗口的宽度。如果它在某个断点（768px或更低，480px或更低等）下，将小部件移动到另一个容器div。

我已经为我做了这项工作 - 但是小部件本身没有响应，因此您必须处理不适合视口的新语言版本。

希望有所帮助。

Answer 2

在快速搜索我刚刚回答的网站上可能重复的问题时找到了这篇文章，但是如果其他人最终在这里寻求解决方案，则会发布答案。

跳转到解决方案：http://jsfiddle.net/melfy/15zr6ov0/

关于另一个堆栈溢出响应的更多详细信息和代码：

Is there any way for more than one Google Translate widget to be loaded on a page

小提琴代码包含（带有jquery）：

<!DOCTYPE html 

PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <title>Google Translate</title>
</head>

<body>

    <div id="header" style="background-color: #ddd;">
        <div id="google_translate_element"></div>

        This is a header

    </div>

    <p> This is some text that should be translated </p>


    <div id="footer" style="background-color: #ddd;">
        This is your footer

        <div id="google_translate_element2"></div>
    </div>


<script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

<script type="text/javascript">

// store google translate's change event
trackChange = null;
pageDelayed = 3000;

// overwrite prototype to snoop, reset after we find it (keep this right before translate init)
Element.prototype._addEventListener = Element.prototype.addEventListener;
Element.prototype.addEventListener = function(a,b,c) {
  reset = false;

  // filter out first change event
  if (a == 'change'){
    trackChange = b;
    reset = true;
  }

  if(c==undefined)
    c=false;

  this._addEventListener(a,b,c);

  if(!this.eventListenerList)
    this.eventListenerList = {};

  if(!this.eventListenerList[a])
    this.eventListenerList[a] = [];

  this.eventListenerList[a].push({listener:b,useCapture:c});

  if (reset){
    Element.prototype.addEventListener = Element.prototype._addEventListener;
  }
};


function googleTranslateElementInit() {
  new google.translate.TranslateElement({ pageLanguage: 'en' }, 'google_translate_element');

  let first = $('#google_translate_element');
  let second = $('#google_translate_element2');

  let nowChanging = false;

  // we need to let it load, since it'll be in footer a small delay shouldn't be a problem
  setTimeout(function(){
    select = first.find('select');
    // lets clone the translate select
    second.html(first.clone());
    second.find('select').val(select.val());

    // add our own event change
    first.find('select').on('change', function(event){
      if (nowChanging == false){
        second.find('select').val($(this).val());
      }
      return true;
    });

    second.find('select').on('change', function(event){
      if (nowChanging){
        return;
      }

      nowChanging = true;
      first.find('select').val($(this).val());
      trackChange();

      // give this some timeout incase changing events try to hit each other                    
      setTimeout(function(){
        nowChanging = false;
      }, 1000);

    });
  }, pageDelayed);
}
</script>

</body>

</html>

Answer 3

这对我有用。将以下内容添加到CSS中：

#google_translate_element img
{
width: auto !important;
}

您可能必须根据结构代码中的内容重命名容器。

两个用于响应式布局的Google Translator小部件

3 个答案: