現在、私はここにあるシンプルな Google 翻訳ドロップダウン メニューを使用しています: http://translate.google.com/translate_tools
また、私が持っているいくつかのフラグ アイコンをクリックして、Google 翻訳ウィジェットのテキストベースのリンクによって呼び出される同じ JavaScript 呼び出しをトリガーできるようにしたいと考えています。
これを達成する方法についてのアイデアはありますか？フラグをクリックすると、Google 翻訳テキスト リンクをクリックするのと同じ動作を開始する方法がわかりません。
@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 に「Choose Language」要素がなくなるため、それも処理する必要があることに注意してください。
また、すべてのスクリプト (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;
});
});
@mogelbrod、上記のコードを使用しましたが、Chrome で完全に機能し、Firefox と Safari で試してみましたが、機能しませんでした。span.click イベントは、Google 翻訳のイベント ハンドラを起動しません。
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 関数を使用することで解決できますが、試していません。
スクリプト作成は不要になりました。
#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をスウェーデン語からスペイン語に翻訳します。
カスタム フラグ アイコンを使用した Google 翻訳の実装
このリンクを参照してください
このカスタム リストの利点は、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>私もこの問題に苦労していました-フラグをクリック可能にし、代わりに gtranslate 選択メニューを非表示にするために。Googleはおそらく時々物事を変更するので、上記のコードは私にはうまくいきませんでした...彼らは私に良いアイデアと最終的な解決策をもたらしたと思いました.
言語をマッピングします。必要な言語を選択し、gtranslate ドロップダウンに表示される順序を確認します。フラグのリンクは同じ順序である必要があります。大事です！
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 を作成します (今のところ、 内のテキストのみですが、必要に応じて任意の画像を配置できます)。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>
これは、訪問者の言語の言語の名前が異なる順序になると失敗するため、Boris Samardž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;
});
});
次のコードでソートされたデフォルトの言語の問題
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();
}