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

2022-01-18 00:00:00 widget google-translate javascript wordpress

例如，有什么方法可以在侧边栏中加载一个谷歌翻译小部件，在页脚中加载一个.

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)

首先添加您的标题元素:

Start by adding your header element:

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

然后我们添加页脚元素:

Then we add our footer element:

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

接下来我们拉入谷歌翻译器

Next we pull in the google translator

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

现在我们进入了好的部分:

Now we get to the good part:

<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

相关文章