利用Google给网站接入谷歌翻译google_translate_element网站多语言转换.

给网站加谷歌翻译，搜索引擎一搜一大堆，这里不再赘述。只贴一个申请谷歌翻译的一个地址：https://translate.google.com/Xk2ECMSPLUS
Xk2ECMSPLUS
下面是官方给出的代码：Xk2ECMSPLUS

 Xk2ECMSPLUS

<div id="google_translate_element"></div><script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
        

改良代码：Xk2ECMSPLUS

之所以这么改，里面有三个地方要注意的：Xk2ECMSPLUS

Xk2ECMSPLUS
根据自己的网站布局，这个div可能是其他js动态添加，此时调用不一定存在。Xk2ECMSPLUS

Xk2ECMSPLUS
图片大多为google.com，部分被墙地区，不一定打得开，而且图片本身不影响交互。会加快翻译插件显示：亲测可用，响应时间从10秒减少到0.5秒。Xk2ECMSPLUS

Xk2ECMSPLUS
发现插件本身的pc效果并不会自动兼容移动端。所以这里根据浏览器代理判断移动端来实现：移动端使用原生select进行加载。Xk2ECMSPLUS
Xk2ECMSPLUS
为什么element.js?&cb=googleTranslateElementInit的cb前面加了个and符号？Xk2ECMSPLUS
猜测和js中的某些正则匹配有关。不带这个&,则回调函数不会被调用。Xk2ECMSPLUS
Xk2ECMSPLUS
<script>Xk2ECMSPLUS
function googleTranslateElementInit() {Xk2ECMSPLUS
    var google_translate_element = document.getElementById('google_translate_element');Xk2ECMSPLUS
    var timer = setInterval(function() {Xk2ECMSPLUS
        google_translate_element = document.getElementById('google_translate_element');Xk2ECMSPLUS
        if (google_translate_element) {Xk2ECMSPLUS
            clearInterval(timer);Xk2ECMSPLUS
            var langName = navigator.language ? navigator.language.split('-')[0].toLowerCase() : 'en';Xk2ECMSPLUS
            new google.translate.TranslateElement({Xk2ECMSPLUS
                    pageLanguage: langName,Xk2ECMSPLUS
                    //0，原生select，并且谷歌logo显示在按钮下方。1，原生select，并且谷歌logo显示在右侧。2，完全展开语言列表，适合pc，Xk2ECMSPLUS
                    layout: /mobile/i.test(navigator.userAgent) ? 0 : 2,Xk2ECMSPLUS
                },Xk2ECMSPLUS
                'google_translate_element'Xk2ECMSPLUS
            );Xk2ECMSPLUS
            // 清除图片的请求Xk2ECMSPLUS
            img = [].slice.call(document.querySelectorAll('#goog-gt-tt img,#google_translate_element img'));Xk2ECMSPLUS
            img.forEach(function(v, i) {Xk2ECMSPLUS
                v.src = '';Xk2ECMSPLUS
            });Xk2ECMSPLUS
        }Xk2ECMSPLUS
    }, 300);Xk2ECMSPLUS
}Xk2ECMSPLUS
</script>Xk2ECMSPLUS
<script id="translate_google_js" src="//translate.google.cn/translate_a/element.js?&cb=googleTranslateElementInit"></script>Xk2ECMSPLUS