是否有任何方法可以在页面上加载多个Google翻译小部件 [英] Is there any way for more than one Google Translate widget to be loaded on a page

问题描述

例如，是否有可能在侧边栏中加载Google翻译小部件，在页脚中加载一个。

Is there any way possible to load a Google Translate widget in the sidebar and one in the footer, for example.

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

Every way I've tried has only loaded so that both appear in the location of the first instance on the page.

推荐答案

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

After a bit of tinkering I kinda felt obligated to solve the puzzle! You can skip to the good part by checking out the jsfiddle: (it works as of now but knowing google it might not tomorrow)

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

让我们开始：

加载第一个谷歌翻译并为你在调用右边后添加到DOM的选择框添加一个监听器元素，但我们需要更改事件来调用我们将从原始版本克隆的选择框的更改以获取谷歌更新翻译，这会因为我们过度采用原型而变得有点混乱（这通常是不好的做法）

First google translate is loaded and adds a listener for a select box it adds to the DOM after you call the right element but we need that change event to call a change for a select box we're going to clone from the original one to get google to update the translation, this gets a bit messy as we over take the prototype (which is usually bad practice)

首先添加标题元素：

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

然后我们添加页脚元素：

Then we add our footer element:

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

接下来我们拉入google翻译器

Next we pull in the google translator

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

You can change the pageDelayed variable to trigger quicker or slower but if it's in your footer, bumping it up to delay longer may help it work more efficiently depending on your page load

这篇关于是否有任何方法可以在页面上加载多个Google翻译小部件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！