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

Question

例如，是否有任何方法可以在侧边栏和页脚中加载 Google 翻译小部件。

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

Answer 1

经过一些修补，我觉得有义务解决这个难题!您可以通过查看 jsfiddle 跳到好的部分:(它现在有效，但知道谷歌它明天可能不会)

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

---

让我们开始吧:

首先加载谷歌翻译并为选择框添加一个监听器，它在您调用正确的元素后添加到 DOM，但我们需要该更改事件来调用我们将从原始克隆的选择框的更改一个是让谷歌更新翻译，当我们接管原型(prototype)时这会变得有点困惑(这通常是不好的做法)

首先添加您的标题元素:

<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 变量以更快或更慢地触发，但如果它在您的页脚中，将其增加以延迟更长的时间可能有助于它更有效地工作，具体取决于您的页面负载