时间戳

首页 > 解决方案 > 谷歌翻译下拉菜单 - 以该语言本身设置语言选项标签

javascript - 谷歌翻译下拉菜单 - 以该语言本身设置语言选项标签

问题描述

我使用了带有代码的谷歌翻译元素：

<div id="google_translate_element"></div>
function googleTranslateElementInit() {
    new google.translate.TranslateElement({
        pageLanguage: 'en'
    }, 'google_translate_element');
}
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit">

这给了我带有英文标签的标准语言选择器下拉菜单。

如何将语言标签自定义为该语言本身？我想要的结果是：

<select>
<option selected="selected" value="">select</option>
<option value="af">Afrikaans</option>
<option value="sq">shqip</option>
<option dir="ltr" value="ar">العربية</option>
<option value="be">Беларуская</option>
<option value="bg">български</option>
<option value="ca">català</option>
<option value="zh-CN">中文(简体)</option>
<option value="zh-TW">中文(繁體)</option>
<option value="hr">Hrvatska</option>
<option value="cs">česky</option>
<option value="da">Dansk</option>
<option value="nl">Nederlands</option>
<option value="et">Eesti</option>
<option value="tl">Filipino</option>
<option value="fi">suomi</option>
<option value="fr">Français</option>
<option value="gl">Galego</option>
<option value="de">Deutsch</option>
<option value="el">Ελληνικά</option>
<option dir="ltr" value="iw">עברית</option>
<option value="hi">हिन्दी</option>
<option value="hu">magyar</option>
<option value="is">Íslenska</option>
<option value="id">Indonesia</option>
<option value="ga">Gaeilge</option>
<option value="it">Italiano</option>
<option value="ja">日本語&lt;/option>
<option value="ko">한국어&lt;/option>
....
</select>

更新 我虽然替换了谷歌生成的选择的 innerHTML

var googleDropdown = $("#google_translate_element .goog-te-combo");
var customDropdown = $("#custom-translate");
googleDropdown.innerHTML = customDropdown.innerHTML;

自定义选择：

<select id="custom-translate" style="display:none;">
  <option value="">Select Language</option>
  <option value="af">Afrikaans</option>
  <option value="sq">Albanian</option>
  <option value="am">Amharic</option>
  <option value="ar">Arabic (العربية)</option>
  ...
</select>

当我在加载所有内容时在控制台上尝试它时，这有效，但是当我在文件中添加此代码时，问题是 googleTranslateElementInit 最终执行。

那么如何在谷歌翻译完成后让我的代码执行呢？

标签： javascriptgoogle-translatelanguage-translationgoogle-translation-apigoogle-translator-toolkit

解决方案

这是我的解决方案

我自己为此苦苦挣扎了很长时间。我最终不得不学习一些 JQuery 来访问 iframe 并编辑下拉列表中的文本。一旦我能够访问文本元素，我就编写了一个巨大的 switch 语句来将该语言的英文版本的文本更改为其母语。我使用谷歌翻译或应用程序脚本 LanguageApp 来翻译语言名称。

$("#google_translate_element").on("click", function () {
  var languages = $("iframe").contents().find(".text").get();
  console.log(languages);
  for (i = 0; i < languages.length; ++i) {
    var languageElem = languages[i];
    var Lang = languageElem.textContent;
    console.log(Lang);
    var nativeLang = getNativeLang(Lang);
    if (!nativeLang) {
      nativeLang = Lang;
    }
    languageElem.textContent = nativeLang;
    console.log(nativeLang);
  }
});

function getNativeLang(Lang) {
  switch (Lang) {
    case "Spanish":
      return "Español";
    case "Haitian Creole":
      return "Kreyòl Ayisyen";
    case "Portuguese":
      return "Português";
    case "Chinese (Simplified)":
      return "中文";
    case "Chinese (Traditional)":
      return "中文";
    case "Afrikaans":
      return "Afrikaans";
    case "Albanian":
      return "Shqiptar";
    case "Amharic":
      return "አማርኛ";
    case "Arabic":
      return "عربى";
    case "Armenian":
      return "Հայերեն";
    case "Azerbaijani":
      return "AzəRbaycan";
    case "Basque":
      return "Euskal";
    case "Belarusian":
      return "Беларус";
    case "Bengali":
      return "বাংলা&quot;;
    case "Bosnian":
      return "Bosanski";
    case "Bulgarian":
      return "Български";
    case "Catalan":
      return "Català";
    case "Cebuano":
      return "Cebuano";
    case "Corsican":
      return "Corsu";
    case "Croatian":
      return "Hrvatski";
    case "Czech":
      return "Čeština";
    case "Danish":
      return "Dansk";
    case "Dutch":
      return "Nederlands";
    case "Esperanto":
      return "Esperanto";
    case "Estonian":
      return "Eestlane";
    case "Filipino":
      return "Pilipino";
    case "Finnish":
      return "Suomalainen";
    case "French":
      return "Français";
    case "Frisian":
      return "Frysk";
    case "Galician":
      return "Galego";
    case "Georgian":
      return "ᲥᲐᲠᲗᲣᲚᲘ&quot;;
    case "German":
      return "Deutsche";
    case "Greek":
      return "Ελληνικά";
    case "Gujarati":
      return "ગુજરાતી";
    case "Hausa":
      return "Hausa";
    case "Hawaiian":
      return "ʻŌlelo Hawaiʻi";
    case "Hebrew":
      return "עברית";
    case "Hindi":
      return "हिन्दी";
    case "Hmong":
      return "Hmong";
    case "Hungarian":
      return "Magyar";
    case "Icelandic":
      return "Íslensku";
    case "Igbo":
      return "Ndi Igbo";
    case "Indonesian":
      return "Bahasa Indonesia";
    case "Irish":
      return "Gaeilge";
    case "Italian":
      return "Italiano";
    case "Japanese":
      return "日本語&quot;;
    case "Javanese":
      return "Basa Jawa";
    case "Kannada":
      return "ಕನ್ನಡ&quot;;
    case "Kazakh":
      return "Қазақ";
    case "Khmer":
      return "ខ្មែរ&quot;;
    case "Korean":
      return "한국어&quot;;
    case "Kinyarwanda":
      return "Ikinyarwanda";
    case "Kurdish (Kurmanji)":
      return "Kurdî";
    case "Kyrgyz":
      return "Кыргызча";
    case "Lao":
      return "ລາວ&quot;;
    case "Latin":
      return "Latine";
    case "Latvian":
      return "Latvietis";
    case "Lithuanian":
      return "Lietuvis";
    case "Luxembourgish":
      return "Lëtzebuergesch";
    case "Macedonian":
      return "Македонски";
    case "Malagasy":
      return "Malagasy";
    case "Malay":
      return "Bahasa Melayu";
    case "Malayalam":
      return "മലയാളം";
    case "Maltese":
      return "Malti";
    case "Maori":
      return "Maori";
    case "Marathi":
      return "मराठी";
    case "Mongolian":
      return "Монгол";
    case "Myanmar (Burmese)":
      return "မြန်မာ&quot;;
    case "Nepali":
      return "नेपाली";
    case "Norwegian":
      return "Norsk";
    case "Nyanja":
      return "Nyanja";
    case "Odia (Oriya)":
      return "ଓଡିଆ";
    case "Pashto":
      return "پښتو";
    case "Persian":
      return "فارسی";
    case "Polish":
      return "Polskie";
    case "Punjabi":
      return "ਪੰਜਾਬੀ";
    case "Romanian":
      return "Română";
    case "Russian":
      return "Русский";
    case "Samoan":
      return "Sāmoa";
    case "Serbian":
      return "Српски";
    case "Sesotho":
      return "Sesotho";
    case "Shona":
      return "Shona";
    case "Scots Gaelic":
      return "Gàidhlig";
    case "Sindhi":
      return "سنڌي";
    case "Sinhala":
      return "සිංහල&quot;;
    case "Slovak":
      return "Slovenský";
    case "Slovenian":
      return "Slovenščina";
    case "Somali":
      return "Soomaali";
    case "Sundanese":
      return "Urang Sunda";
    case "Swahili":
      return "Kiswahili";
    case "Swedish":
      return "Svenska";
    case "Tagalog":
      return "Tagalog";
    case "Tajik":
      return "Точик";
    case "Tamil":
      return "தமிழ்&quot;;
    case "Telugu":
      return "తెలుగు";
    case "Thai":
      return "ไทย&quot;;
    case "Turkish":
      return "Türk";
    case "Turkmen":
      return "türkmençe";
    case "Ukrainian":
      return "Українська";
    case "Urdu":
      return "اردو";
    case "Uyghur":
      return "ئۇيغۇر تىلى";
    case "Uzbek":
      return "O'Zbek";
    case "Vietnamese":
      return "TiếNg ViệT";
    case "Welsh":
      return "Cymraeg";
    case "Xhosa":
      return "Isixhosa";
    case "Yiddish":
      return "יידיש";
    case "Yoruba":
      return "Yoruba";
    case "Zulu":
      return "Isizulu";
  }
}

推荐阅读