将 Google 翻译添加到网站

IT技术 javascript html css google-translate
2021-02-28 14:33:21

看这里谷歌翻译我得到以下代码。

<meta name="google-translate-customization" content="9f841e7780177523-3214ceb76f765f38-gc38c6fe6f9d06436-c"></meta>

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

但是在这里查看html-5-tutorial，在右上角，我看到以下代码：

<div class="translate">
  <div id="google_translate_element">
    <div dir="ltr" class="skiptranslate goog-te-gadget">
      <div id=":0.targetLanguage">
        <select class="goog-te-combo">
          <option value="">Select Language</option>
          <option value="af">Afrikaans</option>
          <option value="sq">Albanian</option>
          <option value="ar">Arabic</option>
          <option value="hy">Armenian</option>
          <option value="az">Azerbaijani</option>
          <option value="eu">Basque</option>
          <option value="be">Belarusian</option>
          <option value="bn">Bengali</option>
          <option value="bg">Bulgarian</option>
          <option value="ca">Catalan</option>
          <option value="zh-CN">Chinese (Simplified)</option>
          <option value="zh-TW">Chinese (Traditional)</option>
          <option value="hr">Croatian</option>
          <option value="cs">Czech</option>
          <option value="da">Danish</option>
          <option value="nl">Dutch</option>
          <option value="eo">Esperanto</option>
          <option value="et">Estonian</option>
          <option value="tl">Filipino</option>
          <option value="fi">Finnish</option>
          <option value="fr">French</option>
          <option value="gl">Galician</option>
          <option value="ka">Georgian</option>
          <option value="de">German</option>
          <option value="el">Greek</option>
          <option value="gu">Gujarati</option>
          <option value="ht">Haitian Creole</option>
          <option value="iw">Hebrew</option>
          <option value="hi">Hindi</option>
          <option value="hu">Hungarian</option>
          <option value="is">Icelandic</option>
          <option value="id">Indonesian</option>
          <option value="ga">Irish</option>
          <option value="it">Italian</option>
          <option value="ja">Japanese</option>
          <option value="kn">Kannada</option>
          <option value="ko">Korean</option>
          <option value="la">Latin</option>
          <option value="lv">Latvian</option>
          <option value="lt">Lithuanian</option>
          <option value="mk">Macedonian</option>
          <option value="ms">Malay</option>
          <option value="mt">Maltese</option>
          <option value="no">Norwegian</option>
          <option value="fa">Persian</option>
          <option value="pl">Polish</option>
          <option value="pt">Portuguese</option>
          <option value="ro">Romanian</option>
          <option value="ru">Russian</option>
          <option value="sr">Serbian</option>
          <option value="sk">Slovak</option>
          <option value="sl">Slovenian</option>
          <option value="es">Spanish</option>
          <option value="sw">Swahili</option>
          <option value="sv">Swedish</option>
          <option value="ta">Tamil</option>
          <option value="te">Telugu</option>
          <option value="th">Thai</option>
          <option value="tr">Turkish</option>
          <option value="uk">Ukrainian</option>
          <option value="ur">Urdu</option>
          <option value="vi">Vietnamese</option>
          <option value="cy">Welsh</option>
          <option value="yi">Yiddish</option>
        </select>
      </div>
      Powered by 
      <span style="white-space: nowrap;">
        <a class="goog-logo-link" href="http://translate.google.com" target="_blank">
          <img style="padding-right: 3px;" src="http://www.google.com/images/logos/google_logo_41.png" width="37" height="13">
          Translate
        </a>
      </span>
    </div>
  </div>
  <script>
    function googleTranslateElementInit() {
      new google.translate.TranslateElement({
        pageLanguage: 'en'
      }, 'google_translate_element');
    }
  </script>
</div>

前者仅适用于实时站点，而不适用于本地计算机，因此我无法使用 CSS 定位和设置样式。此外，它不包含任何 SELECT 和 OPTION 标记。

后者包含 SELECT 和 OPTION 标记，但如果我复制并粘贴整个代码，它在实时站点上不起作用。

我想我的问题是如何使用后来的标记实现谷歌翻译？

6个回答

这是本地和远程都可以使用的标记 - 从https://www.w3schools.com/howto/howto_google_translate.asp复制：

<div id="google_translate_element"></div>
<script>
    function googleTranslateElementInit() {
        new google.translate.TranslateElement(
            {pageLanguage: 'en'},
            'google_translate_element'
        );
    }
</script>
<script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
我用代码更新了它以删除“由谷歌翻译提供支持”，但还要注意这违反了署名要求：developers.google.com/translate/v2/... - 尽管谷歌可能不太关心小型非营利组织项目。
2021-04-22 14:33:21
它在 Chrome 中非常适合我。你使用的是什么浏览器？如果您使用 Chrome 或 Firefox，请使用开发人员工具查看“网络”选项卡，然后您可以查看哪些请求失败。
2021-04-23 14:33:21
哦，抱歉，您说得对，它不会生成下拉列表。它使用 iFrame，您将无法对其进行样式设置。道歉。我会考虑让下拉菜单工作。
2021-04-24 14:33:21
那行不通。虽然修复路径会使 SELECT 显示在本地计算机上，但它没有任何 OPTION 元素，也不会生成任何标记。
2021-05-07 14:33:21
是的，如果我是你，我会将整个东西包裹在 a 中<div>并使用 CSS 为其赋予正确的高度，这样你就不会得到跳跃效果。
2021-05-07 14:33:21 
<div id="google_translate_element"></div>
<script type="text/javascript">
  function googleTranslateElementInit() {
    new google.translate.TranslateElement({
      pageLanguage: 'en',
      includedLanguages: 'es',
      layout: google.translate.TranslateElement.InlineLayout.SIMPLE
    }, 'google_translate_element');
  }
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
添加一些描述来回答。@lupita
2021-05-14 14:33:21 
function googleTranslateElementInit() {
  new google.translate.TranslateElement(
    {pageLanguage: 'en'},
    'google_translate_element'
  );
}
与其他答案一样，这可以通过一些解释来说明这究竟实现了什么。
2021-05-10 14:33:21

允许谷歌翻译移动友好摆脱布局部分，布局：google.translate.TranslateElement.InlineLayout.SIMPLE 

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

它适用于我的网站，并且适合移动设备使用。https://livinghisword.org/articles/pages/whoiscernandisourworld.php

<div id="google_translate_element"></div><script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'ar', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
你能详细说明一下吗？纯代码答案可能会被标记为“低质量”并被删除。
2021-04-24 14:33:21
其它你可能感兴趣的问题
上一篇JavaScript 使用基于 64 位编码的代码减少图像的大小和质量 下一篇UIWebview中的NSString