logo标签列表

将谷歌翻译添加到网站

javascripthtmlcssgoogle-translate
23

看这里 Google Translate 我得到以下代码。

<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标记，但如果我复制并粘贴整个代码，则无法在现场网站上运行。

我想我的问题是如何使用后者的标记实现Google翻译？

尝试使用https://dev59.com/CGkv5IYBdhLWcg3wlR71#12999313 - Shivanshu
1
我认为你应该让用户决定是否接受糟糕的翻译，而不是将这种糟糕的翻译作为你自己的翻译提供。 - MatTheCat
有没有一种方法可以修改该脚本，以在HTML文档中的“Powered by Translate <a>”元素中添加一个“rel”属性？ - Wanderlust Consulting
感谢您发布这个问题。我需要类似的东西。只是一个问题：Google是否提供免费服务？ - curious1
1
@curious1：是的，它是免费的。 - Jawad
@Jawad，我在 Stack Overflow 上发布了一个帖子。你能看一下吗？https://stackoverflow.com/questions/71769887/google-translate-just-translate-one-page-only-not-each-page-automatically - curious1
15个回答
33

以下是应该能够在本地和远程都工作的标记 - 从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>
2
对我来说在Chrome上完美运行。你用的是什么浏览器？如果你在使用Chrome或Firefox，请使用开发者工具查看“network”选项卡，然后您就可以看到哪些请求失败了。 - Robin Winslow
哦，对不起，你是正确的，它不能生成下拉列表。它使用了一个iFrame，无法进行样式设置。抱歉。我会研究如何使下拉列表可用。 - Robin Winslow
1
我更新了代码以删除“由Google翻译提供”的标识，并添加了注释说明这将违反归属要求：https://developers.google.com/translate/v2/attribution#attribution-and-logos - 尽管Google可能不会对小型非营利项目过于在意。 - Robin Winslow
1
如果我是你，我会用<div>把整个东西包起来，并使用CSS给它正确的高度，这样就不会出现跳动的效果了。 - Robin Winslow
它的工作正常，我有这个fiddle http://jsfiddle.net/krbrey4L/。但是只有在FF中存在问题。语言下拉菜单没有显示语言。 - Parkash Kumar
显示剩余13条评论
6
<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 - Rohit Poudel
以上答案是有效的，但如果您想隐藏谷歌翻译按钮并使用有限的语言，则可以通过添加一点CSS或Javascript来自定义它，如此处所示： https://qawithexperts.com/article/javascript/using-google-translate-to-translate-language-using-html--jav/403 - user13993546
1
function googleTranslateElementInit() {
  new google.translate.TranslateElement(
    {pageLanguage: 'en'},
    'google_translate_element'
  );
}
1
和其他答案一样，需要解释一下这个代码实现的具体功能。 - Robin Winslow
1

2022年，这段旧代码在我的情况下工作良好Github，无需任何Google API密钥。

我修改了这些人gtranslate.io的代码。以下是它在我的网站https://pogonyalo.com上在所有现代浏览器中如何工作的示例。

更新：如果您想选择应该翻译什么-只需将class ="notranslate"添加到不应翻译的元素即可。

enter image description here

2
干得好！但是我想知道，是否有选择要翻译页面上的内容和可以跳过的选项？ - DevAnimal
2
只需将 class="notranslate" 添加到不应翻译的元素即可！ - Ruslan Novikov
谢谢提供信息。我需要类似的东西。一个快速的问题：Google是否免费提供此服务？ - curious1
1
@curious1 是的，翻譯是Google提供給用戶的基本免費服務。這裡使用JavaScript在Web瀏覽器端翻譯您的網站內容。這種方法的缺點是SEO。因為Google Bot只會爬取您的網站內容中的一種源語言。 - Ruslan Novikov
@RuslanNovikov，我在 Stack Overflow 上发布了一个帖子。你能看一下吗？https://stackoverflow.com/questions/71769887/google-translate-just-translate-one-page-only-not-each-page-automatically - curious1
2
我想点赞，但你提供的代码有混淆并且不起作用，而且由于这个原因我根本无法调试它。说真的，谁会对这样简单的代码进行混淆？？我给你点了踩。 - Thomas Rbt
1
为了使谷歌翻译更适合移动设备，请删除布局部分，布局：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

0
<div id="google_translate_element"></div><script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'fr', layout: google.translate.TranslateElement.FloatPosition.TOP_RIGHT}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
1
尽管这段代码可能回答了问题，但提供有关为什么和/或如何回答问题的额外上下文可以提高其长期价值。 - rollstuhlfahrer
0
<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>
你能否详细说明一下？仅仅给出代码的答案可能会被标记为“低质量”并被删除。 - Gilles Gouaillardet
0

实现Google翻译HTML代码非常容易。在您的项目中使用此代码，希望它能帮助您。

    <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>
0

代码

<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'hi', 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>
0
<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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接