Внедрение Google Translate с помощью значков настраиваемых флагов

Ответ 1

Было очень весело найти решение для этого вопроса!

<!-- 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>

Ответ 2

@mogelbrod не всегда работает, поэтому я немного взломал его.

Если пользователь зарегистрирован в учетной записи Google, Google обнаружит его язык и автоматически переведет текст на языке, чтобы вы не смогли запустить событие на нужном элементе, потому что атрибут data-lang не будет правильным!

Пользователи, которые не вошли в учетную запись Google и американские/английские пользователи, будут иметь это.

И, например; Хорватские пользователи будут иметь это.

В этом случае лучше отобразить порядок языков. Например, сверху, это будет

0 - английский

1 - французский

2 - немецкий

3 - Итальянский

HTML:

Обратите внимание на свойство размещения данных (вы можете изменить порядок элементов, но сохраните размещение, как указано выше).

<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 больше нет элемента "Выбрать язык", поэтому мне тоже пришлось его обрабатывать.

Также хорошо не показывать значки до тех пор, пока не будут загружены все сценарии (google translate).

$(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;
        });
});

Ответ 3

@mogelbrod, я использовал ваш код выше, и он отлично работал на Chrome, пробовал его на Firefox и Safari, не работал. Событие span.click не запускает обработчик событий google translate.

Я придумал другой метод, с которым я просто хочу поделиться, используя Google, а не плагин на основе 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

Кстати, вопрос о событии span.click, с которым я столкнулся в Firefox и Safari, можно решить, используя вышеприведенную функцию triggerHtmlEvent, но я еще не пробовал.

Ответ 4

Реализация Google Translate с помощью значков пользовательских флагов

Ссылка на эту ссылку

http://www.freshcodehub.com/Article/26/implementing-google-translate-with-custom-flag-icons

Благосклонность этого пользовательского списка, чем мы можем скрыть виджет переводчика google и использовать весь язык для перевода веб-страницы.

<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>

Ответ 5

Теперь никаких скриптов не требуется!

Добавьте тег #googtrans(TO_LANG_CODE) к адресу, к которому относится ваш соответствующий флаг.

Здесь TO_LANG_CODE - это код языка для нужного вам языка. Это предполагает, что на странице используется Google Website Translator, как в вопросе, и ваш оригинальный язык может быть автоматически идентифицирован.

Идентификация исходного языка может помочь избежать ошибок, для этого используйте форму #googtrans(FROM_LANG_CODE|TO_LANG_CODE).

Пример:
http://nykopingsguiden.se/#googtrans (se | es) переводит шведскую страницу
http://nykopingsguiden.se со шведского на испанский.

Ответ 6

проблема с языком по умолчанию, отсортированная по следующему коду

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();
    }

Ответ 7

Чтобы реализовать полностью бэкэнд-решение (до включения 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>

Ответ 8

Это решение для решения Boris Samardžija, поскольку оно терпит неудачу, когда имена языков на языке посетителя приводят к их другому порядку.

Сначала у вас есть правильные коды языков в некоторых атрибутах значков. Например. <a href="#" data-lang="German" data-class="de">. Затем убедитесь, что у вас будет доступный элемент google translate, например:

<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 свойства C элемента google, которое представляет собой отображение кодов языков на имена:

$(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;
    });
});

Ответ 9

Я тоже боролся с этой проблемой - чтобы сделать флаги кликабельными и скрыть меню выбора gtranslate. Google, вероятно, время от времени меняет вещи, поэтому коды выше не работают для меня... Думали, они привели меня к хорошим идеям и, наконец, к решению.

• отобразить языки. Выберите нужные языки и хорошо выглядите, в каком порядке они отображаются в dropdow gtranslate - ссылки на флаги должны иметь одинаковый порядок. Это важно!

• в функции, доказанной функцией go google googleTranslateElementInit(), добавьте параметр MultilanguagePage: true parametr. Я также прокомментировал язык по умолчанию и pagelanguage... по какой-то причине это работает...

   //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 там, если хотите) И не забудьте создать элемент перевода google!

       <!-- 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>

Ответ 10

Я сделал свое собственное решение на основе "избранной" версии Google Translate:

<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>

Я использовал setcookie() для PHP:

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

Я не знаю, почему google script делает два одинаковых файла cookie с тем же именем, но с другим доменом:

посмотреть экран EditThisCookie

($ _ COOKIE [] видит только один файл cookie)

поэтому этот код должен называть домен с помощью "." при первом запуске и сначала удалить cookie googtrans (не работает без удаления; /).

и вот мои 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>

и скрыть список выбора Google по умолчанию, который сгенерирован, просто добавьте одну строку в код css:

#google_translate_element {display: none; }

Не забудьте изменить значения языка страницы перед использованием вышеприведенного кода;)

Ответ 11

<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>

Ответ 12

У меня есть бегущий код. Где вы можете создать собственное поле выбора с вашим флагом или 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>