javascript – Google翻译的多个实例

我正试图让多个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更改为我的页脚翻译功能.

结果：只显示id =“标题”翻译.

测试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>

javascript – Google翻译的多个实例

解决方法

相关文章