Google翻译的多个实例 [英] Multiple Instances of Google Translate
问题描述
我正试图让多个Google Translation Drop Down实例出现，但它似乎只会选择一个显示。
I'm trying to get multiple instances of Google Translation Drop Down to show up, but it seems it will only pick one to show up.
整页代码
<!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>
下面我列出了一些我认为的东西我试过了，结果就是这样。每次测试我都会恢复到上面显示的默认代码。
Below I've listed out some things that I've tried and it's result. Every test I revert back to the default code shown above.
测试1： 2个调用元素的标题脚本。 js 但是将第二个？cb = googleTranslateElementInit 更改为我的页脚翻译功能。
Test 1: 2 header scripts that call element.js but change the 2nd ?cb=googleTranslateElementInit to my footer translate function.
结果：只有 id =标题翻译显示。
测试2：在我的 id =footer翻译函数调用中我将第二个参数更改为单独的ID比 id =header 函数调用。所以它看起来像这样： new google.translate.TranslateElement（{pageLanguage：'en'}， 'test'）; 然后我改变我的 id =footer翻译div以匹配参数。
Test 2: In my id="footer" translation function call I change the second parameter to a seperate ID than the id="header function call. so it looks like this: new google.translate.TranslateElement({pageLanguage: 'en'}, 'test'); I then change my id="footer" translation div to match the parameter.
结果：只有 id =页脚翻译显示。
测试3：将第二个翻译脚本添加到页脚并更改？cb = 到？cb = translat Etest法。我还将我的 id =footer翻译函数调用更改为匹配 translateTest 并将参数/ translate div id更改为测试。
Test 3: Add a 2nd translation script to the footer and change ?cb= to ?cb=translateTest. I also change my id="footer" translate function call to match translateTest and the parameter / translate div id to test.
结果：只有 id =footer翻译显示。
推荐答案
我尝试了这些选项，但最终需要完全 .detach（）元素，以便第二个工作。
I attempted may of these options, but ultimately needed to completely .detach() the element in order for the second to work.
在这种情况下，它是一个响应式网站，翻译需要在两个不同的菜单中工作：
In this case it was for a responsive website where the translate needed to work in two different menus:
<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>
这篇关于Google翻译的多个实例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
