我正试图让多个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 =“footer”翻译函数调用中,我将第二个参数更改为单独的ID而不是id =“header函数调用.所以它看起来像这样：new google.translate.TranslateElement({pageLanguage：’en’ },’test’);然后我改变我的id =“footer”翻译div以匹配参数.
结果：只显示id =“footer”Translate.
测试3：向页脚添加第二个翻译脚本并更改？cb = to？cb = translateTest.我还改变了我的id =“footer”翻译函数调用以匹配translateTest和参数/ translate div id来测试.
结果：只显示id =“footer”Translate.
解决方法
我尝试了这些选项,但最终需要完全.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>
