Multiple Instances of Google Translate

喜夏-厌秋 提交于 2019-12-03 13:04:18

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>

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.

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>

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

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>
Igho-Godwin Avweroswo Adeshola
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>
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!