堆栈内存溢出
  简体   繁体   English

谷歌翻译的多个实例

[英]Multiple Instances of Google Translate

 原文  2014-02-13 16:23:06  2   7    javascript/ html/ google-translate/ multiple-instances

问题描述

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.我试图让 Google Translation Drop Down 的多个实例显示出来，但它似乎只会选择一个显示出来。

Full Page Code整页代码

<!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.每次测试我都会恢复到上面显示的默认代码。

Test 1: 2 header scripts that call element.js but change the 2nd ?cb=googleTranslateElementInit to my footer translate function.测试 1： 2 个调用element.js但将第二个?cb=googleTranslateElementInit更改为我的页脚翻译功能的标题脚本。

Result: Only the id="header" Translate shows up.结果：只显示id="header" Translate。

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.测试 2：在我的id="footer"翻译函数调用中，我将第二个参数更改为一个单独的 ID，而不是id="header函数调用。所以它看起来像这样： new google.translate.TranslateElement({pageLanguage: 'en'}, 'test');然后我更改我的id="footer"翻译 div 以匹配参数。

Result: Only the id="footer" Translate shows up.结果：只显示id="footer" Translate。

Test 3: Add a 2nd translation script to the footer and change ?cb= to ?cb=translateTest .测试 3：将第二个翻译脚本添加到页脚并将?cb=更改为?cb=translateTest 。 I also change my id="footer" translate function call to match translateTest and the parameter / translate div id to test .我还将我的id="footer" translate 函数调用更改为匹配translateTest和参数 / translate div id 到test 。

Result: Only the id="footer" Translate shows up.结果：只显示id="footer" Translate。

7 个解决方案

解决方案1
 6  2017-04-10 03:00:27

I attempted may of these options, but ultimately needed to completely .detach() the element in order for the second to work.我尝试了可能的这些选项，但最终需要完全.detach()元素才能使第二个工作。

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>

解决方案2
 3  2014-04-05 18:28:53

This is practically not achievable as Google has not built it to work with multiple instances on the page at all.这实际上是无法实现的，因为谷歌根本没有构建它来处理页面上的多个实例。 After hacking with the code a little, this is the best you can achieve http://jsbin.com/hiwazedi/1/稍微修改一下代码后，这是您可以实现的最佳效果http://jsbin.com/hiwazedi/1/

To get this to work how you want, you would have to download and host all the files yourself and make heavy modifications.要使其按您的意愿工作，您必须自己下载并托管所有文件并进行大量修改。 Seeing as how all the code is obfuscated, this wouldn't be easy.看到所有代码是如何被混淆的，这并不容易。 It would also most likely break after a while if and when Google updates how it works on their end.如果谷歌最终更新它的工作方式，它也很可能会在一段时间后中断。 Lastly this would most likely be against their terms of service.最后，这很可能违反他们的服务条款。

Another solution另一种解决方案

The only reason I could see you wanting to do this is to display it in the header and footer for example.我可以看到您想要这样做的唯一原因是例如在页眉和页脚中显示它。 If so I would either position it fixed, so that the user can see it where ever they scroll on the page.如果是这样，我会将其定位为固定的，以便用户可以在页面上滚动的任何位置看到它。 Alternatively you could detect when the user is near the bottom of the page and move it to the footer.或者，您可以检测用户何时靠近页面底部并将其移动到页脚。

解决方案3
 1  2019-03-25 11:20:03

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>

And:和：

  <script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

解决方案4
 0  2014-04-08 13:56:18

If using IFrames is an option you could put this code into separate page Iframe.html如果使用 IFrames 是一个选项，您可以将此代码放入单独的页面 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>

Then然后

<!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>

解决方案5
 0  2015-12-17 04:15:45

So I know this is an old question but I just stumbled across it.所以我知道这是一个老问题，但我只是偶然发现了它。 The solution I came up with isn't pretty, but it works.我想出的解决方案并不漂亮，但它确实有效。

For context, I have my google translate code in a div with a class of, "gtr"对于上下文，我将我的谷歌翻译代码放在一个带有“gtr”类的 div 中

Using JS / jQuery使用 JS/jQuery

setTimeout(function(){
    $('.gtr').clone().appendTo('.drawer .nav-util li.gt');
}, 3000);

解决方案6
 0  2017-05-24 14:12:32

Since the average user will either have a desktop sized window at page load, or a mobile sized window.因为普通用户在页面加载时要么有一个桌面大小的窗口，要么有一个移动大小的窗口。 I solved this by using 2 if statements at page load which check the width where it transitions between themes.我通过在页面加载时使用 2 个 if 语句来检查它在主题之间转换的宽度来解决这个问题。 1 in one area and 1 in another.一个区域1个，另一个区域1个。 Duplicating all the elements in each area.复制每个区域中的所有元素。 Like this像这样

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

And和

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

解决方案7
 0  2022-06-21 04:04:06

function googleTranslateElementInit() {
    if (window.innerWidth < 1024) {
        console.log("mobile")
       new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_elementMobile');
    
    } else{
          console.log("Desktop")
        new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
    }   
    
    }

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Google图表上的多个实例 - Multiple instances on Google Charts 加载多个谷歌地图实例 - Load multiple google map instances 无法使用Google翻译进行翻译 - Cannot translate with Google translate 在同一页面上添加多个 Google Places 实例 - Adding Multiple Instances of Google Places on Same Page Google Places自动完成API多个实例 - Google Places Autocomplete API Multiple Instances 一个页面上有多个Google地图实例 - Multiple instances of Google Maps on one page 在 HTML 页面上创建 google API 的多个实例 - Creating multiple instances of a google API on an HTML page 谷歌翻译 - Translate google 无论如何，是否需要使用Google翻译API进行多次重复翻译 - Is there anyway to do multiple repeated translations with the google translate API 不同Div内的Google可视化图表的多个实例 - Multiple Instances of Google Visualizations Chart Inside Separate Divs
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM