将 Google 翻译添加到网站答案

【问题标题】：Adding Google Translate to a web site将 Google 翻译添加到网站
【发布时间】：2012-08-27 22:51:20
【问题描述】：

看这里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 标记，但如果我复制并粘贴整个代码，它在实时站点上不起作用。

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

【问题讨论】：

试试stackoverflow.com/a/12999313/2558535
我认为你应该让用户自己决定翻译质量差，而不是自己提供这种糟糕的翻译。
有没有办法修改这个脚本，为 html 文档中的 Powered by Translate 元素添加一个 rel 属性？

标签： javascript html css google-translate

【解决方案1】：

以下是应该在本地和远程工作的标记 - 从 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>

【讨论】：

那行不通。虽然修复路径会使 SELECT 显示在本地计算机上，但它没有任何 OPTION 元素，也不会生成任何标记。
它在 Chrome 中非常适合我。你使用的是什么浏览器？如果您使用的是 Chrome 或 Firefox，请使用开发人员工具查看“网络”选项卡，然后您可以查看哪些请求失败了。
哦，对不起，你是对的，它没有生成下拉列表。它使用 iFrame，您将无法对其进行样式设置。道歉。我会考虑让下拉菜单工作。
我用代码更新了它以删除“由谷歌翻译提供支持”，但也注意到这违反了归属要求：developers.google.com/translate/v2/… - 尽管谷歌可能不会关心小型非营利组织项目。
是的，如果我是你，我会将整个东西包裹在 <div> 中，并使用 CSS 为其赋予合适的高度，这样你就不会得到跳跃效果。

【解决方案2】：

2021 此遗留代码适用于 mycase Github

我修改了这些家伙 gtranslate.io 的代码。在所有现代浏览器中https://pogonyalo.com 的工作原理示例。

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

【讨论】：

干得好！但想知道，是否有任何选项可以选择页面上应翻译的内容以及可以跳过的内容？
只是将 class="notranslate" 添加到不应翻译的元素中！

【解决方案3】：

实现Google translate html code 非常简单。在您的项目中使用此代码，希望对您有所帮助。

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

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

{{-- Google Language Translator  START --}}
<style>
.google-translate {
    display: inline-block;
    vertical-align: top;
    padding-top: 15px;
}

.goog-logo-link {
    display: none !important;
}

.goog-te-gadget {
    color: transparent !important;
}

#google_translate_element {
    display: none;
}

.goog-te-banner-frame.skiptranslate {
    display: none !important;
}

body {
    top: 0px !important;
}

</style>

<script src="{{asset('js/translate-google.js')}}"></script>



<script type="text/javascript">
function googleTranslateElementInit2(){
    new google.translate.TranslateElement({
                    pageLanguage:'en',
                    includedLanguages: 'en,es',
        // https://ctrlq.org/code/19899-google-translate-languages
        // includedLanguages: 'en,it,la,fr',
        // layout:     google.translate.TranslateElement.InlineLayout.SIMPLE,
        autoDisplay:true
    },'google_translate_element2');
    var a = document.querySelector("#google_translate_element select");
    // console.log(a);

    if(a){
        a.selectedIndex=1;
        a.dispatchEvent(new Event('change'));
    }
}
</script>

<ul class="navbar-nav my-lg-0 m-r-10">
<li>
    <div class="google-translate">
        <div id="google_translate_element2"></div>
    </div>
</li>

// translate-google.js
(function () {
var gtConstEvalStartTime = new Date();

function d(b) {
    var a = document.getElementsByTagName("head")[0];
    a || (a = document.body.parentNode.appendChild(document.createElement("head")));
    a.appendChild(b)
}

function _loadJs(b) {
    // console.log(b);
    var a = document.createElement("script");
    a.type = "text/javascript";
    a.charset = "UTF-8";
    a.src = b;
    d(a)
}

function _loadCss(b) {
    var a = document.createElement("link");
    a.type = "text/css";
    a.rel = "stylesheet";
    a.charset = "UTF-8";
    a.href = b;
    d(a)
}

function _isNS(b) {
    b = b.split(".");
    for (var a = window, c = 0; c < b.length; ++c)
        if (!(a = a[b[c]])) return !1;
    return !0
}

function _setupNS(b) {
    b = b.split(".");
    for (var a = window, c = 0; c < b.length; ++c) a.hasOwnProperty ? a.hasOwnProperty(b[c]) ? a = a[b[c]] : a = a[b[c]] = {} : a = a[b[c]] || (a[b[c]] = {});
    return a
}
window.addEventListener && "undefined" == typeof document.readyState && window.addEventListener("DOMContentLoaded", function () {
    document.readyState = "complete"
}, !1);
if (_isNS('google.translate.Element')) {
    return
}(function () {
    var c = _setupNS('google.translate._const');
    c._cest = gtConstEvalStartTime;
    gtConstEvalStartTime = undefined;
    c._cl = 'en';
    c._cuc = 'googleTranslateElementInit2';
    c._cac = '';
    c._cam = '';
    c._ctkk = eval('((function(){var a\x3d3002255536;var b\x3d-2533142796;return 425386+\x27.\x27+(a+b)})())');
    var h = 'translate.googleapis.com';
    var s = (true ? 'https' : window.location.protocol == 'https:' ? 'https' : 'http') + '://';
    var b = s + h;
    c._pah = h;
    c._pas = s;
    c._pbi = b + '/translate_static/img/te_bk.gif';
    c._pci = b + '/translate_static/img/te_ctrl3.gif';
    c._pli = b + '/translate_static/img/loading.gif';
    c._plla = h + '/translate_a/l';
    c._pmi = b + '/translate_static/img/mini_google.png';
    c._ps = b + '/translate_static/css/translateelement.css';
    c._puh = 'translate.google.com';
    _loadCss(c._ps);
    _loadJs(b + '/translate_static/js/element/main.js');
})();
})();

【讨论】：

【解决方案6】：

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

【讨论】：

虽然此代码可能会回答问题，但提供有关此代码为何和/或如何回答问题的额外上下文可提高其长期价值。

【解决方案7】：

代码

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

【讨论】：

【解决方案8】：

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

【讨论】：

你能详细说明一下吗？纯代码答案可能会被标记为“低质量”并被删除。

【解决方案9】：

<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

【解决方案10】：

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

【讨论】：

【解决方案11】：

为了让谷歌翻译对移动设备友好，去掉布局部分，布局：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

【讨论】：

【解决方案12】：

<div id="google_translate_element"></div><script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'ko', 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>

【讨论】：

【解决方案13】：

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

【讨论】：

与其他答案一样，这可以通过一些解释来解释这究竟是什么。

【解决方案14】：

用途：

c._ctkk=eval('((function(){var a\x3d2143197373;var b\x3d-58933561;return 408631+\x27.\x27+(a+b)})())');

<script type="text/javascript"> 
    (function(){
        var d="text/javascript",e="text/css",f="stylesheet",g="script",h="link",k="head",l="complete",m="UTF-8",n=".";
        function p(b){
            var a=document.getElementsByTagName(k)[0];
            a||(a=document.body.parentNode.appendChild(document.createElement(k)));
            a.appendChild(b)}
        function _loadJs(b){
            var a=document.createElement(g);
            a.type=d;
            a.charset=m;
            a.src=b;
            p(a)}
        function _loadCss(b){
            var a=document.createElement(h);
            a.type=e;
            a.rel=f;
            a.charset=m;
            a.href=b;
            p(a)}
        function _isNS(b){
            b=b.split(n);
            for(var a=window,c=0;c<b.length;++c)
                if(!(a=a[b[c]])) return ! 1;
            return ! 0}
        function _setupNS(b){
            b=b.split(n);
            for(var a=window,c=0;c<b.length;++c)
                a.hasOwnProperty?a.hasOwnProperty(b[c])?a=a[b[c]]:a=a[b[c]]={}:a=a[b[c]]||(a[b[c]]={});
            return a}
        window.addEventListener&&"undefined"==typeof document.readyState&&window.addEventListener("DOMContentLoaded",function(){document.readyState=l},!1);
    if (_isNS('google.translate.Element')){return}
    (function(){
        var c=_setupNS('google.translate._const');
        c._cl='en';
        c._cuc='googleTranslateElementInit1';
        c._cac='';
        c._cam='';
        c._ctkk=eval('((function(){var a\x3d2143197373;var b\x3d-58933561;return 408631+\x27.\x27+(a+b)})())');
        var h='translate.googleapis.com';
        var s=(true?'https':window.location.protocol=='https:'?'https':'http')+'://';
        var b=s+h;
        c._pah=h;
        c._pas=s;
        c._pbi=b+'/translate_static/img/te_bk.gif';
        c._pci=b+'/translate_static/img/te_ctrl3.gif';
        c._pli=b+'/translate_static/img/loading.gif';
        c._plla=h+'/translate_a/l';
        c._pmi=b+'/translate_static/img/mini_google.png';
        c._ps=b+'/translate_static/css/translateelement.css';
        c._puh='translate.google.com';
        _loadCss(c._ps);
        _loadJs(b+'/translate_static/js/element/main.js');
    })();
    })();
</script>

【讨论】：

请edit 提供更多信息。不鼓励使用纯代码和“试试这个”的答案，因为它们不包含可搜索的内容，也没有解释为什么有人应该“试试这个”。我们在这里努力成为知识的资源。

【解决方案15】：

<div id="google_translate_element"></div><script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'th,zh-CN,zh-TW', 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 可见，但它可能对您正在尝试做的事情进行一些解释。