Question

例如，是否可以通过任何方式在边栏中加载Google翻译小部件，在页脚中加载一个小部件。

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

Answer 1

经过一番修补后，我觉得有义务解决这个难题！您可以通过检查jsfiddle跳过大部分内容：（它现在可以正常工作，但知道google明天可能不会）

让我们开始吧：

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

首先添加标题元素：

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

Answer 2

不幸的是，您不能在单个页面中多次加载窗口小部件。 Google只是不允许这样做。一种可能的解决方法是将代码放入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>

有什么办法可以在页面上加载多个Google翻译小部件

2 个答案: