有什么辦法可以在頁面上加載多個Google翻譯小部件

Question

例如，是否可以通過任何方式在邊欄中加載Google翻譯小部件，在頁腳中加載一個。

我嘗試過的每種方式都只會加載，因此兩者都將顯示在頁面上第一個實例的位置。

Answer 1

經過一番修補后，我覺得有義務解決這個難題！ 您可以通過檢查jsfiddle跳過大部分內容：（它現在可以正常工作，但知道google明天可能就不行了）

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

讓我們開始：

首先谷歌翻譯被加載，並為選擇框添加一個偵聽器，它在您調用正確的元素后添加到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 個解決方案

解決方案1
4 已采納 2018-08-09 07:53:49

解決方案2
0 2018-08-07 22:56:38

有什么辦法可以在頁面上加載多個Google翻譯小部件

問題描述

2 個解決方案

解決方案1 4 已采納 2018-08-09 07:53:49

解決方案2 0 2018-08-07 22:56:38

解決方案1
4 已采納 2018-08-09 07:53:49

解決方案2
0 2018-08-07 22:56:38