Multiple Instances of Google Translate

问题

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.

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.

Result: Only the id="header" Translate shows up.

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.

Result: Only the id="footer" Translate shows up.

Test 3: Add a 2nd translation script to the footer and change ?cb= to ?cb=translateTest. I also change my id="footer" translate function call to match translateTest and the parameter / translate div id to test.

Result: Only the id="footer" Translate shows up.

回答1:

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>

回答2:

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/

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:

If using IFrames is an option you could put this code into separate page 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>

回答4:

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"

Using JS / jQuery

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

回答5:

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. 1 in one area and 1 in another. 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>

回答6:

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>

来源：https://stackoverflow.com/questions/21759756/multiple-instances-of-google-translate

标签

javascript

html

google-translate

multiple-instances