有没有办法在一个页面上加载多个谷歌翻译小部件

Question

例如，有没有办法在侧边栏和页脚中加载一个谷歌翻译小部件。

我尝试过的每一种方式都只是加载，以便两者都出现在页面上第一个实例的位置。

Answer 1

经过一番修修补补，我觉得有必要解决这个难题！您可以通过查看 jsfiddle 跳到好的部分：（它现在有效，但知道谷歌明天可能不会）

http://jsfiddle.net/melfy/15zr6ov0/

让我们开始：

首先 google translate 被加载并为一个选择框添加一个监听器，它在你调用正确的元素后添加到 DOM 但我们需要更改事件来调用一个选择框的更改，我们将从原始选择框克隆以获取谷歌更新翻译，当我们接管原型时这会变得有点混乱（这通常是不好的做法）

首先添加您的标题元素：

<div id="google_translate_element"></div>

然后我们添加我们的页脚元素：

<div id="google_translate_element2"></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>

您可以更改 pageDelayed 变量以更快或更慢地触发，但如果它在您的页脚中，则将其延迟更长的时间可能有助于它更有效地工作，具体取决于您的页面加载