2011-11-30 33 views
6

私はブルガリア語でウェブページを持っており、ユーザーはワンクリックで英語に翻訳することができます。また、ユーザーがページに入ったときにページ上部に翻訳バナーが表示されないようにする必要があります(ユーザーが翻訳リンクをクリックした後も可能です)。また、それは、このコードによるページの上部にあるバナーを示し、Iは#googtrans(bg|en)doc)を使用しようとしましたが、それはうまくいきませんでした:翻訳をトリガーするGoogle翻訳リンクを追加するには?

<script> 
function googleTranslateElementInit() { 
    new google.translate.TranslateElement({ 
    pageLanguage: 'bg', 
    autoDisplay: false, 
    layout: google.translate.TranslateElement.InlineLayout.SIMPLE 
    }, 'google_translate_element'); 
} 
</script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script> 

doc

をコードはここにありますkrumovgrad.eu右上のフラグをクリックします。

+0

これまでに何がありますか? – Hannele

+0

非稼働リンクの翻訳バナー。私はバナーを望んでいない、私は動作する/リンクするリンクが欲しい。 – ilhan

+0

更新:Firefoxで;動作するリンクを持つバナー。 IE 8では何もありません。 – ilhan

答えて

1

Googleは先に私の友人を考えました。このページをご覧ください:http://translate.google.com/translate_tools

編集:申し訳ありませんが、私はあなたがページが提供するものを使用していることを認識しています!シンプルなJavaScriptで、表示されている要素を非表示にし、英語のリンクを作成すると、onClickは非表示のselect要素の値を変更し、ページ全体が翻訳されます。

これはちょっと面倒ですが、ジョブが完了し、ユーザーはそれが存在するかどうかわかりません!

Google翻訳サーバーに送信されたリクエストをキャプチャし、英語を選択してそのリンクを使用するときに呼び出されるリンクをキャプチャすることも考えられます。

Chromeは、私は数日前に同じ問題を持っていたし、作品解決策を考え出した

+0

男!私の答えを編集する分を私に与えてください! lol ... – vinnybad

9

(デベロッパーコンソール用のctrl +シフト+ Jを参照)要求をキャプチャする素敵な有用性を有します。私はスペイン語のサイトを持っており、それを英語に翻訳するまでは、Google Website Translatorを使用する可能性があります。ユーザーが英語のフラグをクリックすると、Webサイトがまだ翻訳されていないことをユーザーに知らせるTwitter Bootstrapモーダルが開き、クリックして翻訳をトリガーすることができるボタンがあります。私はJavaScriptでイベントをキャプチャし、 '/ es/en'という値でクッキー 'googtrans'を設定し、ページをリロードします。 Googleのスクリプトは残りの部分を処理します。リロード後、私はクッキーが存在するかどうかをチェックし、スペイン語のフラグの英語のフラグを変更します。ユーザーがクリックすると、クッキーを ''(空文字列)に設定し、ページをリロードします。

簡単にするために、私はブートストラップモーダル部分を含めません。

Htmlの

<!DOCTYPE html> 
<html> 
    <head> 
    (...) 
    <meta name="google-translate-customization" content="(YOUR_TRANSLATE_CUSTOMIZATION_ID)" /> 
    (...) 
    </head> 
    <body> 
     (...) 
     <a id="lang-change-en" class="lang-change" href="javascript:void(0);"> 
      <img src="images/en-flag.png" alt="English Flag"> 
     </a> 
     (...) 
     <script src="js/script.js"></script> 
     <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script> 
    </body> 
</html> 

のJavascript(script.js)ウェブサイト翻訳ツールセットアップウィザードで

function setCookie(cname, cvalue, exdays) { 
    var expires; 
    if (exdays === 0) { 
     expires = ''; 
    } else { 
     var d = new Date(); 
     d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000)); 
     expires = "expires=" + d.toGMTString(); 
    } 
    var domain = (typeof domain === "undefined") ? '' : "; domain="+domain; 
    document.cookie = cname + "=" + cvalue + "; " + expires + "path=" + path + domain; 
} 

function getCookie(cname) { 
    var name = cname + "="; 
    var ca = document.cookie.split(';'); 
    for (var i = 0; i < ca.length; i++) { 
     var c = ca[i].trim(); 
     if (c.indexOf(name) == 0) { 
      return c.substring(name.length, c.length); 
     } 
    } 
    return ""; 
} 

//Google provides this function 
function googleTranslateElementInit() { 
    new google.translate.TranslateElement({ 
     pageLanguage: 'es', 
     includedLanguages: 'en', 
     layout: google.translate.TranslateElement.InlineLayout.SIMPLE, 
     autoDisplay: false 
    },'google_translate_element'); 
} 

//Using jQuery 
$(document).ready(function() { 
    $(document).on('click','#lang-change-en', function() { 
     setCookie('googtrans', '/es/en', 0, '.viajoasalta.com'); 
     setCookie('googtrans', '', 0, '/'); 
     location.reload(); 
    }); 

    $(document).on('click', '#lang-change-es', function() { 
     setCookie('googtrans', '', 0, '/', '.viajoasalta.com'); 
     setCookie('googtrans', '', 0, '/'); 
     location.reload(); 
    }); 

    var googTrans = getCookie('googtrans'); 

    if (googTrans === '/es/en') { 
     var src = $('#lang-change-en > img').attr('src').replace('en-flag', 'es-flag'); 
     $('#lang-change-en > img').attr('src', src); 
     $('#lang-change-en').attr('id', 'lang-change-es'); 
    } 
}); 

、あなたがリストに表示する言語を選択することができます。 <select>ここで、それぞれ<option>には、valueとして、必要なクッキーの値、またはdata-cookie="value"のようなフラグを持つ通常のリストがあります。次に、JavaScriptを使用して、リストの 'change'イベント(selectの場合)または 'click'イベントを取得し、適切にクッキーを設定します。

注:私は意図的にウェブサイトの翻訳がレンダリングされるdivの削除:

<div id="google_translate_element"></div> 

は、それが動作を確認するには、あなたがwww.viajoasalta.comを訪問することができますが、少なくとも私たちが最終的にそれを翻訳するまで、少なくとも。

+1

あなたのコードの問題は、パスを指定しなかったので同じ名前の2番目のクッキーを書き込むので、 'setCookie()'関数です。ここを見て、ポイント1:http://www.sitepoint.com/3-things-about-cookies-you-may-not-know/ viajoasalta.comのウェブサイトでもこれを見ることができます。翻訳バーの[元の表示]をクリックすると、Googleスクリプトによって書き込まれたgoogtransのCookieは削除されますが、重複しているためにページが強制的に翻訳され、フラグが壊れてしまいます。これは単純な修正です: 'function setCookie(cname、cvalue){document.cookie = cname +" = "+ cvalue +"; path =/"; } ' – FFish

+0

あなたのコメントのために@FFishありがとう。 'setCookie()'関数を変更して、 'path'と' domain'パラメータの両方を受け付けるようにしました。 Googleのウェブサイト翻訳者が「www.viajoasalta.com」と「.viajoasalta.com」のCookieを設定しているため、「domain」パラメータが必要でした。私は 'exdays' = 0を0に使用するので、クッキーの有効期間はセッションの有効期間になります。私はまだ、翻訳バーの "元の表示"をクリックするとフラグを更新する方法を知らない。方法を見つけたら、私は新しいコメントを投稿します。 – kiki