2017-12-24 19 views
0

htmlページ内の翻訳にGoogle翻訳を使用できる良い例はありますか?私は、ドイツの旗(ボタン)をドイツ語などに翻訳するよりもクリックすると...私の質問は、このコンボボックスを特定の言語のためにシミュレートする方法です。 https://www.w3schools.com/howto/howto_google_translate.aspJavascript/Jqueryコールボタンクリック時のGoogle翻訳(フラグ付き)

おかげ

+0

ジャストヘッドアップを...私は個人的にW3schoolを使用しないことを助言します。 [W3Fools](http://www.w3fools.com/) – Rushikumar

+0

親愛なるRushikumar、あなたの助言に感謝しますが、私はそれが良いと思います。おはようございます! :) – Darman

答えて

1

あなたは、この自動作成選択フィールドを非表示にし、それはあなたが入力フィールドを経由して選択することができ、目的の言語を検索するために、各オプション・フィールドを反復処理することで動的値です設定することができます。

・ホープ、このことができます:

<!DOCTYPE html> 
<html lang="en-US"> 
<body> 

<h1>My Web Page</h1> 

<p>Hello everybody!</p> 

<p>Translate this page.</p> 

<!-- hide auto-created selection field completely by hiding it's container --> 
<div id="google_translate_element" style="display:none"></div> 

<p>You can translate the content of this page by selecting a language in the input field.</p> 

<!-- flag: you can choose language here: en, de, af etc. --> 
<input value="en" id="language"/> 
<button onclick="changeLanguageByButtonClick()">Translate</button> 

</body> 
<script type="text/javascript"> 

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

function changeLanguageByButtonClick() { 
    var language = document.getElementById("language").value; 
    var selectField = document.querySelector("#google_translate_element select"); 
    for(var i=0; i < selectField.children.length; i++){ 
    var option = selectField.children[i]; 
    // find desired langauge and change the former language of the hidden selection-field 
    if(option.value==language){ 
     selectField.selectedIndex = i; 
     // trigger change event afterwards to make google-lib translate this side 
     selectField.dispatchEvent(new Event('change')); 
     break; 
    } 
    } 
} 
</script> 

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

</html> 
関連する問題