javascript - 使用自定义标志图标实现 Google 翻译

Question

目前，我使用的是简单的谷歌翻译下拉菜单：http: //translate.google.com/translate_tools

我还希望能够单击我拥有的一些标志图标并触发由谷歌翻译小部件中基于文本的链接调用的相同 javascript 调用。

有人对如何实现这一点有想法吗？我不知道如何使点击标志启动与点击谷歌翻译文本链接相同的行为。

score 48 · Accepted Answer

为这个问题找到解决方案很有趣！

<!-- Use CSS to replace link text with flag icons -->
<ul class="translation-links">
  <li><a href="#" class="spanish" data-lang="Spanish">Spanish</a></li>
  <li><a href="#" class="german" data-lang="German">German</a></li>
</ul>

<!-- Code provided by Google -->
<div id="google_translate_element"></div>
<script type="text/javascript">
  function googleTranslateElementInit() {
    new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay: false}, 'google_translate_element');
  }
</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit" type="text/javascript"></script>

<!-- Flag click handler -->
<script type="text/javascript">
    $('.translation-links a').click(function() {
      var lang = $(this).data('lang');
      var $frame = $('.goog-te-menu-frame:first');
      if (!$frame.size()) {
        alert("Error: Could not find Google translate frame.");
        return false;
      }
      $frame.contents().find('.goog-te-menu2-item span.text:contains('+lang+')').get(0).click();
      return false;
    });
</script>

score 8 · Accepted Answer

@mogelbrod 代码并不总是有效，所以我稍微修改了一下。

如果用户登录 Google 帐户，Google 将检测它的语言并自动翻译语言文本，因此您将无法在所需元素上触发事件，因为 data-lang 属性将不正确！

未登录 Google 帐户的用户和美国/英国用户将拥有此功能。

例如；克罗地亚用户会有这个。

在这种情况下，最好映射语言顺序。例如从上面，那将是

0 - 英语

1 - 法语

2 - 德语

3 - 意大利语

HTML：

注意 data-placement 属性（您可以更改元素顺序，但保留如上所示的位置）。

<div class="translation-icons" style="visibility:hidden">
    <a href="#" class="eng" data-placement="0">eng icon</a>
    <a href="#" class="fra" data-placement="1">fra icon</a>
    <a href="#" class="ger" data-placement="2">ger icon</a>
    <a href="#" class="ita" data-placement="3">ita icon</a>
</div>

JS：我不得不更改查找选择器。请注意，当用户选择语言时，#google_translate_element div 中不再有“选择语言”元素，所以我也必须处理它。

在加载所有脚本（谷歌翻译）之前不要显示图标也很好。

$(window).load(function () {

    $('.translation-icons').css('visibility', 'visible');

        $('.translation-icons a').click(function(e) {
            e.preventDefault();
            var placement = $(this).data('placement');
            var lang_num = $('.translation-icons a').length;
            var $frame = $('.goog-te-menu-frame:first');

            if (!$frame.size()) {
                alert("Error: Could not find Google translate frame.");
                return false;
            }

            var langs = $('.goog-te-menu-frame:first').contents().find('a span.text');

            if(langs.length != lang_num) placement = placement+1;

            langs.eq(placement).click();
            return false;
        });
});

score 4 · Accepted Answer

@mogelbrod，我在上面使用了您的代码，它在 Chrome 上运行良好，在 Firefox 和 Safari 上尝试过，但没有用。span.click 事件不会触发谷歌翻译的事件处理程序。

我想出了另一种方法，我只想通过使用 google select 而不是基于 iframe 的插件来分享。

<!-- Use CSS to replace link text with flag icons -->
<ul class="translation-links">
  <li><a href="#" class="spanish" data-lang="Spanish">Spanish</a></li>
  <li><a href="#" class="german" data-lang="German">German</a></li>
</ul>

<!-- Code provided by Google -->
<div id="google_translate_element"></div>
<script type="text/javascript">
  function googleTranslateElementInit() {
    new google.translate.TranslateElement({pageLanguage: 'en', autoDisplay: false}, 'google_translate_element'); //remove the layout
  }
</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit" type="text/javascript"></script>


<script type="text/javascript">
    function triggerHtmlEvent(element, eventName) {
var event;
if(document.createEvent) {
    event = document.createEvent('HTMLEvents');
    event.initEvent(eventName, true, true);
    element.dispatchEvent(event);
} else {
    event = document.createEventObject();
    event.eventType = eventName;
    element.fireEvent('on' + event.eventType, event);
}
}
            <!-- Flag click handler -->
        $('.translation-links a').click(function(e) {
  e.preventDefault();
  var lang = $(this).data('lang');
  $('#google_translate_element select option').each(function(){
    if($(this).text().indexOf(lang) > -1) {
        $(this).parent().val($(this).val());
        var container = document.getElementById('google_translate_element');
        var select = container.getElementsByTagName('select')[0];
        triggerHtmlEvent(select, 'change');
    }
});
});

        </script>

测试：Chrome (win & Mac), Safari(Win & Mac), FireFox (win) 和 IE8

顺便说一句，我在Firefox和Safari上遇到的span.click事件的问题可以通过使用上面的triggerHtmlEvent函数来解决，不过我还没有尝试过。

score 4 · Accepted Answer

现在不需要编写脚本了！

将标签添加#googtrans(TO_LANG_CODE)到您各自的标志链接到的地址。

这TO_LANG_CODE是您想要的语言的语言代码。这假设该页面在问题中使用谷歌网站翻译，并且可以自动识别您的原始语言。

识别原始语言有助于避免错误，为此请使用表格#googtrans(FROM_LANG_CODE|TO_LANG_CODE)。

示例： http://nykopingsguiden.se/#googtrans(se|
es)将瑞典语页面
http://nykopingsguiden.se从瑞典语翻译成西班牙语。

score 3 · Accepted Answer

使用自定义标志图标实现谷歌翻译

参考这个链接

在此处输入图像描述

这个自定义列表的好处是我们可以隐藏谷歌翻译小部件并使用所有语言来翻译网页。

<div id="google_translate_element" style="display: none">
    </div>
    <script type="text/javascript">
        function googleTranslateElementInit() {
            new google.translate.TranslateElement({ pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay: false }, 'google_translate_element');
        }
    </script>
    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"
        type="text/javascript"></script>
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
    <script>
        function translate(lang) {

            var $frame = $('.goog-te-menu-frame:first');
            if (!$frame.size()) {
                alert("Error: Could not find Google translate frame.");
                return false;
            }
            $frame.contents().find('.goog-te-menu2-item span.text:contains(' + lang + ')').get(0).click();
            return false;
        }
    </script>

score 2 · Accepted Answer

我认为这个 jsfiddle 会帮助你：https ://jsfiddle.net/solodev/0stLrpqg/

function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.FloatPosition.TOP_LEFT}, 'google_translate_element');
}

function triggerHtmlEvent(element, eventName) {
  var event;
  if (document.createEvent) {
    event = document.createEvent('HTMLEvents');
    event.initEvent(eventName, true, true);
    element.dispatchEvent(event);
  } else {
    event = document.createEventObject();
    event.eventType = eventName;
    element.fireEvent('on' + event.eventType, event);
  }
}

jQuery('.lang-select').click(function() {
  var theLang = jQuery(this).attr('data-lang');
  jQuery('.goog-te-combo').val(theLang);

  //alert(jQuery(this).attr('href'));
  window.location = jQuery(this).attr('href');
  location.reload();

});

score 1 · Accepted Answer

使用以下代码排序的默认语言问题

if(lang!="English"){
        $frame.contents().find('.goog-te-menu2-item span.text:contains('+lang+')').get(0).click();
    }else{
        console.log($frame2.contents().find('.goog-te-banner .goog-te-button button').get(0));
        $frame2.contents().find('.goog-te-banner .goog-te-button button').get(1).click();
    }

score 1 · Accepted Answer

要实现一个完整的后端解决方案（在包含translate.js之前），您只需创建一个 php 文件，其中包含

<?php setcookie('googtrans', '/en'); header('location:index.html')?>

如果您希望您的页面使用西班牙语，您只需添加其他 php 文件，例如：

<?php setcookie('googtrans', '/en/es'); header('location:index.html')?>

最后将此文件链接到任何“a”标签

<a href="defaultLang.php"></a>

score 1 · Accepted Answer

这是对 Boris Samardžija 解决方案的修复，因为只要访问者语言中的语言名称导致它们的顺序不同，它就会失败。

首先，在图标的某些属性中具有正确的语言代码。例如 <a href="#" data-lang="German" data-class="de">。然后，确保您将有可用的谷歌翻译元素，例如：

<script type="text/javascript">
var tis;
function googleTranslateElementInit() {
    tis = new google.translate.TranslateElement({defaultLanguage: 'en', pageLanguage: 'en', includedLanguages: 'en,es,it,de,fr', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay: false}, 'google_translate_element');
}
</script>

sl这允许您通过 google 元素的 property的属性找到要翻译成访问者语言的语言名称C，这是语言代码到名称的映射：

$(window).load(function () {    
    $('.translation-links a').click(function(e) {
        e.preventDefault();
        var $frame = $('.goog-te-menu-frame:first');

        if (!$frame.size()) {
            alert("Error: Could not find Google translate frame.");
            return false;
        }

        var codes_names = tis.C.sl;
        var selected_lang = codes_names[$(this).data('class')];

        $('.goog-te-menu-frame:first').contents().find('a span.text:contains(' + selected_lang + ')').click();

        return false;
    });
});

score 1 · Accepted Answer

我也在努力解决这个问题 - 使标志可点击并隐藏 gtranslate 选择菜单。谷歌可能会不时改变事情，所以上面的代码对我不起作用......认为他们给我带来了好主意，最后是解决方案。

映射语言。选择您需要的语言，并按照它们在 gtranslate 下拉菜单中显示的顺序显示良好 - 标志链接应该具有相同的顺序。这很重要！

在函数证明 bu google 函数 googleTranslateElementInit() 中，添加 MultilanguagePage: true 参数。我还注释掉了默认语言和页面语言......出于某种原因，这有效......

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

function googleTranslateElementInit() {
new google.translate.TranslateElement({
//defaultLanguage: 'en', 
//pageLanguage: 'en', 
includedLanguages: 'de,nl,en,es,it,fr', 
layout: google.translate.TranslateElement.InlineLayout.SIMPLE, 
autoDisplay: false,
multilanguagePage: true}, 'google_translate_element')
};

//this one I need because of the first menu with "select the language" item,              after the first click on the language it disappears 
var clickCount = 0;

$(window).load(function () {

    $('.translation-icons a').click(function(e) {
    e.preventDefault();

    var $frame = $('.goog-te-menu-frame:first');

    if (!$frame.size()) {
        alert("Error: Could not find Google translate frame.");
        return false;
        }

     //find the a links element inside the gtranlate first frame
    var langs = $('.goog-te-menu-frame:first').contents().find('.goog-te-menu2 a');

     //the number of the language in flag-elements
    var placement = $(this).data('placement');

 //this again I need to adjust the mapping numbers of the languages in the flag elements        
    if (clickCount == 0){
        placement = $(this).data('placement')+1;
        clickCount++;
        }
    //and finaly imitate click on the gtranslate element which is the same as the number of the language in flag link
    langs.eq(placement).find('span.text').click();
    return false;

});
});

最后是“标志元素”的 html。（现在它只是里面的文本，但如果你愿意，你可以放任何 img 那里）别忘了创建谷歌翻译元素！

       <!-- Code provided by Google -->
       <div id="google_translate_element"></div>

    <div class="translation-icons">
       <a href="#" class="nl" data-placement="0">nl</a>
       <a href="#" class="de" data-placement="1">de</a>
       <a href="#" class="en" data-placement="2">en</a>
      <a href="#" class="fr" data-placement="3">fr</a>
      <a href="#" class="it" data-placement="4">it</a>
      <a href="#" class="sp" data-placement="5">es</a>
   </div>

score 1 · Accepted Answer

我根据谷歌翻译的“选择”版本制作了自己的解决方案：

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

我在 PHP 上使用了 setcookie()：

if ($_GET['lang']) {
  setcookie("googtrans", "", time() - 3600);
  $domena = "." . $_SERVER['HTTP_HOST'];
  setcookie("googtrans", '/pl/' . $_GET['lang'], time()+(3600*24), '/' , $domena);
}

我不知道为什么谷歌脚本会制作 2 个相同的 cookie，名称相同，但域不同：

看看 EditThisCookie 的屏幕

（$_COOKIE[] 只看到一个 cookie）

所以这段代码需要用“。”来命名域。在开始时，首先删除“googtrans”cookie（不删除就不起作用；/）。

这是我的 html 图标：

wybierz język:
<a href="?lang=pl"><img src="imgcss/pl.png" alt="" /></a>
<a href="?lang=en"><img src="imgcss/en.png" alt="" /></a>
<a href="?lang=de"><img src="imgcss/de.png" alt="" /></a>

并隐藏生成的默认谷歌选择列表，只需在 css 代码中添加一行：

#google_translate_element {display: none; }

请记住在使用上面的代码之前更改页面语言值；）

score 1 · Accepted Answer

我有运行代码。您可以在其中使用您的标志或 HTML 创建自定义选择框。

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Google Translation</title>
</head>
<body>
    <form id="form1" runat="server">
    <div id="google_translate_element" style="display: none">
    </div>
    <script type="text/javascript">
        function googleTranslateElementInit() {
            new google.translate.TranslateElement({ pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay: false }, 'google_translate_element');
        }
    </script>
    <script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"
        type="text/javascript"></script>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script>
        function translateLanguage(lang) {
           console.log(lang);
           googleTranslateElementInit();
            var $frame = $('.goog-te-menu-frame:first');
            console.log($frame);
            if (!$frame.size()) {
                alert("Error: Could not find Google translate frame.");
                return false;
            }
            $frame.contents().find('.goog-te-menu2-item span.text:contains(' + lang + ')').get(0).click();
            return false;
        }
    </script>
       <select id="newdemo" onchange="translateLanguage(this.value);">
        <option><a href="javascript:;" val="German"><span>German </span>
            <img src="img/flags/germany_flag.jpg" alt="" /></a> </option>
        <option><a href="javascript:;" val="Italian"><span>Italian
        </span>
            <img src="img/flags/italy_flag.jpg" alt="" /></a> </option>
        <option><a href="javascript:;" val="Hindi"><span>Hindi </span>
            <img src="img/flags/india_flag.png" alt="" /></a> </option>
        <option><a href="javascript:;" val="French"><span>French </span>
            <img src="img/flags/french_flag.jpg" alt="" /></a> </option>
        <option><a href="javascript:;" val="Spanish"><span>Spanish
        </span>
            <img src="img/flags/spain_flag.jpg" alt="" /></a> </option>
        <option><a href="javascript:;" val="Russian"><span>Russian
        </span>
            <img src="img/flags/russia_flag.jpg" alt="" /></a> </option>
    </select>
    <div>
        In this article we explain how to translate the web page into different language
        using google translator. We create a custom country list with flag and call the
        google translator code using javascript custom code. The benifit of this custom
        list is than we can hide the google translator widget and use all the language to
        translate the web page.
    </div>
    </form>
</body>
</html>

score 1 · Accepted Answer

我一直在研究很多，最后这对我来说是正确的：

<div id="google_translate_element"> </div>
<div class="menu-traslate-header">
<ul>
  <li><a href="#googtrans/es">Español</a></li>
  <li><a href="#googtrans/zh-CN">汉语</a></li>
  <li><a href="#googtrans/vi">Việt</a></li>
  <li><a href="#googtrans/ru">Русский</a></li>
  <li><a href="#googtrans/sq">SHQIP</a></li>
  <li><a href="#googtrans/km">ខ្មែរ&lt;/a></li>
  <li><a href="#googtrans/fr">Français</a></li>
  <li><a href="#googtrans/ar">عربي</a></li>
</ul>
</div>
 <script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'en', 
    includedLanguages: 'ar,en,es,fr,km,ru,sq,vi,zh-CN', 
    layout: google.translate.TranslateElement.InlineLayout.SIMPLE, 
    multilanguagePage: true, 
    gaTrack: true, 
  }, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
 <script type="text/javascript">
jQuery(document).ready(function($) {
  $('.menu-traslate-header ul li a').click(function(event) {
      window.location = $(this).attr('href');
      location.reload();
  });
});
</script>

score -1 · Accepted Answer

<script type="text/javascript" src="jquery-1.8.2.min.js"></script>


 <li><a href="#googtrans(en|en)" class="lang-en lang-select" data-lang="en"><img src="English.png" alt="USA"></a></li>
 <li><a href="#googtrans(en|fr)" class="lang-es lang-select" data-lang="fr"><img src="/French.png" alt="FRANCE"></a></li>
<li><a href="#googtrans(en|de)" class="lang-es lang-select" data-lang="de"><img src="German.png" alt="Germany"></a></li>

<li><a href="#googtrans(en|it)" class="lang-es lang-select" data-lang="it"><img src="Italian.png" alt="Italy"></a></li>
<li><a href="#googtrans(en|ja)" class="lang-es lang-select" data-lang="ja"><img src="Japanese.png" alt="JAPAN"></a></li>
<div class="container">
    <h1>Use Google Translate with your Website</h1>
</div>



<script type="text/javascript">
    function googleTranslateElementInit() {
      new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.FloatPosition.TOP_LEFT}, 'google_translate_element');
    }

    function triggerHtmlEvent(element, eventName) {
      var event;
      if (document.createEvent) {
        event = document.createEvent('HTMLEvents');
        event.initEvent(eventName, true, true);
        element.dispatchEvent(event);
      } else {
        event = document.createEventObject();
        event.eventType = eventName;
        element.fireEvent('on' + event.eventType, event);
      }
    }

    jQuery('.lang-select').click(function() {
      var theLang = jQuery(this).attr('data-lang');
      jQuery('.goog-te-combo').val(theLang);

      //alert(jQuery(this).attr('href'));
      window.location = jQuery(this).attr('href');
      location.reload();

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

javascript - 使用自定义标志图标实现 Google 翻译

14 回答 14

Related

Reference