Google翻译的多个实例

Question

Google翻译的多个实例

How*_*Gee 8 html javascript multiple-instances google-translate

我正试图让多个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>

Run Code Online (Sandbox Code Playgroud)

下面我列出了一些我尝试过的东西,结果如下.每次测试我都会恢复到上面显示的默认代码.

测试1: 2个标题脚本调用element.js但将第2个更改?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"translate函数调用更改为匹配translateTest,将参数/ translate div id更改为test.

结果:仅id="footer"显示翻译.

Answer 1

Ben*_*Ben 5

我尝试了这些选项，但最终需要完全使用.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>

Run Code Online (Sandbox Code Playgroud)

Answer 2

Rya*_*yan 3

这实际上是不可能实现的，因为谷歌根本没有构建它来处理页面上的多个实例。在对代码进行了一些修改之后，这是您可以实现的最佳效果http://jsbin.com/hiwazedi/1/

为了让它按照您想要的方式工作，您必须自己下载并托管所有文件并进行大量修改。考虑到所有代码都是如何混淆的，这并不容易。如果谷歌更新其工作方式，它也很可能在一段时间后崩溃。最后，这很可能违反他们的服务条款。

另一种解决方案

我看到您想要执行此操作的唯一原因是例如将其显示在页眉和页脚中。如果是这样，我要么将其固定，以便用户在页面上滚动的任何位置都可以看到它。或者，您可以检测用户何时靠近页面底部并将其移动到页脚。

归档时间：	11 年，11 月前
查看次数：	5306 次
最近记录：	6 年，10 月前