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

【问题标题】：Is there any way for more than one Google Translate widget to be loaded on a page有没有办法在一个页面上加载多个谷歌翻译小部件
【发布时间】：2018-08-03 07:54:35
【问题描述】：

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

我尝试过的每一种方式都只加载了，因此它们都出现在页面上第一个实例的位置。

【问题讨论】：

一个页面中不能有多个谷歌翻译器。

标签： javascript wordpress widget google-translate

【解决方案1】：

经过一番修修补补，我觉得有义务解开这个谜题！您可以通过查看 jsfiddle 来跳到好的部分：（它现在可以工作，但知道 google 可能明天就不行了）

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

开始吧：

首先加载谷歌翻译并为选择框添加一个侦听器，在您调用正确的元素后它添加到 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 变量以更快或更慢地触发，但如果它在您的页脚中，将其延迟更长的时间可能有助于它更有效地工作，具体取决于您的页面加载

【讨论】：

伙计，你是个天才，我已经雇佣了大约十几个不同的开发人员来完成这项工作。为此干杯！
唉，虽然你设法让 2 个翻译

【解决方案2】：

很遗憾，您不能在一个页面中多次加载小部件。谷歌只是不允许这样做。一种可能的解决方法是将代码放入 iFrame，然后将两个 iFrame 放到您的网页上。

创建一个名为 iframe.html 的文件

<html>
<head>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit">
</head>
<body>
<div id="google_translate_element"></div>
    <script type="text/javascript">
        function googleTranslateElementInit(){
            new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
        }
    </script>
</body>
</head>
</html>

在您的其他文件中输入如下代码：

<!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>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?b=googleTranslateElementInit"></script>
</head>

<body>

<div id="header" style="background-color: red;">
    <iframe src="iframe.html"></iframe>
    <strong>A</strong>
</div>

<div id="footer" style="background-color: blue;">
    <iframe src="iframe.html"></iframe>
    <strong>B</strong>
</div>
</body>
</html>

【讨论】：

如果您能提供一个将谷歌翻译代码正确添加到 iframe 的示例，我很乐意将赏金奖励给您
好的。会做。给我几分钟。