web-dev-qa-db-ja.com

カスタムフラグアイコンを使用したGoogle翻訳の実装

現在、ここにあるシンプルなGoogle翻訳のプルダウンメニューを使用しています： http://translate.google.com/translate_tools

私が持っているいくつかのフラグアイコンをクリックして、Google翻訳ウィジェットのテキストベースのリンクによって呼び出されるのと同じjavascript呼び出しをトリガーできるようにしたいと思います。

誰もこれを達成する方法についてのアイデアを持っていますか？フラグをクリックすると、Google翻訳テキストリンクをクリックするのと同じ動作を開始させる方法がわかりません。

javascriptgoogle-translate
19
JasonH

この質問の解決策を見つけるのはとても楽しかったです！

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

@mogelbrodコードは常に機能するとは限らないため、少しハッキングしました。

ユーザーがGoogleアカウントにログインしている場合、Googleはその言語を検出し、言語テキストを自動的に翻訳します。data-lang属性が正しくないため、目的の要素でイベントを発生させることはできません。

Googleアカウントにログインしていないユーザーとアメリカ/英語ユーザーはこれを使用します。 en

そして、例えば;クロアチアのユーザーはこれを持っています。

hr

この場合、言語の順序をマップする方が適切です。上記の例では、

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 divには「言語の選択」要素がなくなるため、それも処理する必要があります。

また、すべてのスクリプト（Google翻訳）がロードされるまでアイコンを表示しないことをお勧めします。

$(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;
        });
});
8
Boris Brdarić

@mogelbrod、上記のコードを使用し、Chromeで完全に動作し、FirefoxとSafariで試してみましたが、動作しませんでした。 span.clickイベントは、Google Translateのイベントハンドラーを起動しません。

Iframeベースのプラグインの代わりにgoogle selectを使用して共有したい別の方法を思いつきました。

<!-- 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関数を使用することで解決できますが、試していません。

4
joeyend

カスタムフラグアイコンを使用したGoogle翻訳の実装

このリンクを参照

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

enter image description here

このカスタムリストの利点は、Google翻訳ウィジェットを非表示にして、すべての言語を使用してWebページを翻訳できることです。

<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>
3
Kamal Pratap

スクリプトは不要になりました！

タグ#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 スウェーデン語からスペイン語。

2
PalmWorks

完全なバックエンドソリューションを実装するには（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>
1
Riki_VaL

次のコードでソートされたデフォルトの言語の問題

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

私もこの問題に苦労していました-フラグをクリック可能にし、代わりにgtranslate選択メニューを非表示にしました。 Googleはおそらく時々変更するので、上記のコードは役に立たなかった...良いアイデアと最終的に解決策を私にもたらしたと思った。

  1. 言語をマップします。必要な言語を選択し、gtranslateドロップダウンに表示される順序で適切に表示します-フラグリンクは同じ順序である必要があります。大事です！

  2. 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。

       <!-- 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>
1
Aleksandra Chuprova

これは、訪問者の言語の言語の名前が異なる順序になると失敗するため、BorisSamardžijaのソリューションの修正です。

まず、アイコンの一部の属性に正しい言語コードを設定します。例えば。 <a href="#" data-lang="German" data-class="de">。次に、Google翻訳要素が利用できることを確認します。例：

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

これにより、言語要素の名前へのマッピングであるgoogle要素のプロパティslのプロパティ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;
    });
});
1
Jindřich Prokop

Google翻訳の「選択」バージョンに基づいて独自のソリューションを作成しました。

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

Googleスクリプトが同じ名前で異なるドメインを持つ2つの同じCookieを作成する理由がわかりません：

EditThisCookieの画面を見る

（$ _COOKIE []は1つの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>

生成されるデフォルトのGoogle選択リストを非表示にするには、CSSコードに1行追加するだけです：

#google_translate_element {display: none; }

上記のコードを使用する前に、ページ言語の値を変更することを忘れないでください;）

0
Marcin Kalinowski

実行中のコードがあります。フラグまたは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>
0
Hansa thakur
<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>
0
Pankaj Upadhyay