我试图让 Google Translation Drop Down 的多个实例显示出来，但它似乎只会选择一个显示出来。
整页代码
<!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" Translate 出现。
测试 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 和参数/将 div id 翻译为 test。
结果:只有 id="footer" 翻译显示。
最佳答案
我尝试了这些选项中的许多选项，但最终需要完全 .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>
关于javascript - 谷歌翻译的多个实例，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21759756/