Javascript 将 Google 翻译添加到网站
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12243818/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-23 07:29:53 来源:igfitidea点击:
Adding Google Translate to a web site
提问by Jawad
Looking here Google TranslateI get the following code.
看这里谷歌翻译我得到以下代码。
<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>
But Looking here html-5-tutorial, at the top right, I see the following code:
但是在这里查看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>
The former works on a live site only and not on a local computer and therfore I can not target and style it using CSS. Also it does not contain any SELECT and OPTION markup.
前者仅适用于实时站点，而不适用于本地计算机，因此我无法使用 CSS 定位和设置样式。此外，它不包含任何 SELECT 和 OPTION 标记。
The later contains the SELECT and OPTION markup but if I copy and paste the whole code, it does not work on a live site.
后者包含 SELECT 和 OPTION 标记，但如果我复制并粘贴整个代码，它在实时站点上不起作用。
I guess my question would be how to implement the google translate using the later markup?
我想我的问题是如何使用后来的标记实现谷歌翻译？
回答by Robin Winslow
Here's the markup that should work, both locally and remotely - copied from html-5-tutorial.com:
这是本地和远程都可以使用的标记 - 从 html-5-tutorial.com 复制：
<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>
回答by as soon as
Code
代码
<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>
回答by Anonymous
function googleTranslateElementInit() {
new google.translate.TranslateElement(
{pageLanguage: 'en'},
'google_translate_element'
);
}
回答by user7277644
to allow google translate to be mobile friendly get rid of the layout section, layout: google.translate.TranslateElement.InlineLayout.SIMPLE
允许谷歌翻译移动友好摆脱布局部分，布局：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>
It works on my site and it is mobile friendly. https://livinghisword.org/articles/pages/whoiscernandisourworld.php
它适用于我的网站，并且适合移动设备使用。https://livinghisword.org/articles/pages/whoiscernandisourworld.php
回答by lupita
<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>
回答by KHALID JABRI
<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>
回答by ajfet-afrique
<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>
回答by rangholiya nikunj
<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>
回答by Ashwani Garg
{{-- 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>
{{-- Google Language Translator ENDS --}}
{{-- 谷歌语言翻译结束 --}}
// 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');
})();
})();
回答by raed awad
<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>
