我正试图让多个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: 2个标题脚本调用element.js
但将第二个?cb=googleTranslateElementInit
更改为我的页脚翻译功能。
结果:只显示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 div id更改为test
。
结果:只显示id="footer"
翻译。
答案 0 :(得分:5)
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>
答案 1 :(得分:2)
这实际上是无法实现的,因为谷歌还没有将其构建为与页面上的多个实例一起使用。在对代码进行黑客攻击之后,这是您可以实现的最佳http://jsbin.com/hiwazedi/1/
为了让您的工作方式如此,您必须自己下载并托管所有文件并进行大量修改。看看所有代码是如何被混淆的,这并不容易。如果谷歌更新它的工作原理,它很可能会在一段时间后破裂。最后,这很可能违反了他们的服务条款。
我可以看到你想要这样做的唯一原因是在页眉和页脚中显示它。如果是这样,我会将其固定,以便用户可以在页面上滚动的位置看到它。或者,您可以检测用户何时靠近页面底部并将其移动到页脚。
答案 2 :(得分:0)
如果使用IFrame是一个选项,您可以将此代码放入单独的页面Iframe.html
<html>
<head>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit">
</head>
<body>
<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit(){
new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
}
</script>
</body>
</head>
然后
<!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?b=googleTranslateElementInit"></script>
</head>
<body>
<div id="header" style="background-color: red;">
<iframe src="IFrame.html"></iframe>
<strong>A</strong>
</div>
<div id="footer" style="background-color: blue;">
<iframe src="IFrame.html"></iframe>
<strong>B</strong>
</div>
</body>
</html>
答案 3 :(得分:0)
所以我知道这是一个老问题,但我偶然发现了它。我提出的解决方案并不漂亮,但它确实有效。
对于上下文,我将我的谷歌翻译代码放在div中,类为“gtr”
使用JS / jQuery
setTimeout(function(){
$('.gtr').clone().appendTo('.drawer .nav-util li.gt');
}, 3000);
答案 4 :(得分:0)
由于普通用户要么在页面加载时具有桌面大小的窗口,要么具有移动大小的窗口。我通过在页面加载时使用2个if语句来解决这个问题,该语句检查它在主题之间转换的宽度。 1个在一个区域,1个在另一个区域。复制每个区域中的所有元素。喜欢这个
<div id="google_translate_elementOne"></div>
<script type="text/javascript">
function googleTranslateElementInitOne() {
new google.translate.TranslateElement({ pageLanguage: 'en' }, 'google_translate_elementOne');
};
</script>
<script>
if ($(window).width() >= 630) {
document.write("<script type=\"text/javascript\" src=\"//translate.google.com/translate_a/element.js?cb=googleTranslateElementInitOne\"><\/script>");
}
</script>
和
<div id="google_translate_elementTWO"></div>
<script type="text/javascript">
function googleTranslateElementInitTWO() {
new google.translate.TranslateElement({ pageLanguage: 'en' }, 'google_translate_elementTWO');
}
</script>
<script>
if ($(window).width() < 630) {
document.write("<script type=\"text/javascript\" src=\"//translate.google.com/translate_a/element.js?cb=googleTranslateElementInitTWO\"><\/script>");
}
</script>
答案 5 :(得分:0)
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>