Google翻译的多个实例

时间:2014-02-13 16:23:06

标签: javascript html google-translate multiple-instances

我正试图让多个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"翻译。

6 个答案:

答案 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>