Google翻译的多个实例
我试图让谷歌翻译的多个实例显示出来，但似乎只会出现一个实例。
全页代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Google Translate</title>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</head>
<body>
<div id="header" style="background-color: red;">
<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit(){
new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
}
</script>
<strong>A</strong>
</div>
<div id="footer" style="background-color: blue;">
<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit(){
new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
}
</script>
<strong>B</strong>
</div>
</body>
</html>下面我列举了一些我尝试过的事情，这是结果。每次测试都会恢复到上面所示的默认代码。
测试1:调用element.js但将第二个?cb=googleTranslateElementInit更改为我的页脚转换函数的2头脚本。
结果：只显示id="header"翻译。
测试2:在我的id="footer"转换函数调用中，我将第二个参数更改为独立的ID，而不是id="header函数调用。它看起来是这样的：new google.translate.TranslateElement({pageLanguage: 'en'}, 'test');，然后我修改我的id="footer"翻译div来匹配参数。
结果：只显示id="footer"翻译。
测试3:向页脚添加第二个翻译脚本，并将?cb=更改为?cb=translateTest。我还将id="footer"转换函数调用更改为匹配translateTest，并将参数/ translate更改为test。
结果：只显示id="footer"翻译。
回答 7
Stack Overflow用户
发布于 2017-04-10 03:00:27
我尝试使用这些选项，但最终需要完全.detach()元素才能使第二个元素工作。
在这种情况下，这是一个响应性很强的网站，翻译需要在两个不同的菜单中进行：
<div id="m_google_translate_element"></div>
<div class="rightHeader" id="mobileHeader">
<div class="translate" id="g_translater">
<div id="google_translate_element"></div>
<script type="text/javascript">
var m = false;
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.FloatPosition.TOP_RIGHT, gaTrack: true, gaId: 'UA-XXXXXX-1'}, 'google_translate_element');
setTimeout(function(){
if (jQuery( window ).width() < 768){
m = true;
jQuery('#g_translater').detach().appendTo('#m_google_translate_element');
}
}, 3000);
}
jQuery( window ).resize(function() {
if (jQuery( window ).width() < 768 && m == false){
m = true;
jQuery('#g_translater').detach().appendTo('#m_google_translate_element');
} else if (jQuery( window ).width() >= 768 && m == true){
m = false;
jQuery('#g_translater').detach().prependTo('#mobileHeader');
}
});
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</div>
</div>Stack Overflow用户
发布于 2014-04-05 18:28:53
这几乎是不可能实现的，因为Google还没有构建它来处理页面上的多个实例。在对代码进行少量黑客攻击之后，这是实现http://jsbin.com/hiwazedi/1/的最好方法。
要想让它以您想要的方式工作，您必须自己下载和托管所有文件，并进行大量修改。考虑到所有的代码是如何被混淆的，这是不容易的。它也很可能会在一段时间后崩溃，如果谷歌更新了他们的工作方式。最后，这很可能违反他们的服务条件。
另一种解决办法
我看到您想要这样做的唯一原因是，例如在页眉和页脚中显示它。如果是这样的话，我要么把它固定好，这样用户就可以在页面上滚动的地方看到它。或者，您可以检测用户何时接近页面底部，并将其移动到页脚。
Stack Overflow用户
发布于 2019-03-25 11:20:03
function googleTranslateElementInit() {
// new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'en,zh-CN,nl,fr,ru,ja,es,ko,pt', layout: google.translate.TranslateElement.FloatPosition.TOP_LEFT}, 'google_translate_element');
if ($(window).width() < 760) {
new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'en,zh-CN,nl,fr,ru,ja,es,ko,pt', layout: google.translate.TranslateElement.FloatPosition.TOP_LEFT}, 'google_translate_element2');
}
else{
new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'en,zh-CN,nl,fr,ru,ja,es,ko,pt', layout: google.translate.TranslateElement.FloatPosition.TOP_LEFT}, 'google_translate_element1');
}
}
</script>和：
<script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>https://stackoverflow.com/questions/21759756
复制相似问题
腾讯云开发者
