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

ECMSPLUS | 2020-11-26 |

摘要:给网站加谷歌翻译,搜索引擎一搜一大堆,这里不再赘述。只贴一个申请谷歌翻译的一个地址:https://translate.google.com/

下面是官方给出的代码: <div id="google_translate_elem...

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

 nwwECMSPLUS

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

改良代码:nwwECMSPLUS


 

之所以这么改,里面有三个地方要注意的:nwwECMSPLUS

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

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

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

如下示例代码:

 

免责/版权声明:

1、所有来源标注为 ECMSPLUS/ecmsplus.com的内容版权均为本站所有,若您需要引用、转载,只需要注明来源及原文链接即可,如涉及大面积转载,请来信告知,获取授权。

2、本站所提供的文章资讯、软件资源、素材源码等内容均为作者提供、网友推荐、互联网整理而来(部分报媒/平媒内容转载自网络合作媒体),仅供学习参考,如有侵犯您的版权,请联系我们,本站将在三个工作日内改正。

3、若您的网站或机构从本站获取的一切资源进行商业使用,除来源为本站的资料需与本站协商外,其他资源请自行联系版权所有人。

4、 ECMSPLUS/ecmsplus.com不保证资源的准确性、安全性和完整性,请您在阅读、下载及使用过程中自行确认,本站亦不承担上述资源对您或您的网站造成的任何形式的损失或伤害

5、未经 ECMSPLUS/ecmsplus.com允许,不得盗链、盗用本站资源;不得复制或仿造本网站,不得在非 ECMSPLUS/ecmsplus.com所属的服务器上建立镜像, ECMSPLUS/ecmsplus.com对其自行开发的或和他人共同开发的所有内容、技术手段和服务拥有全部知识产权,任何人不得侵害或破坏,也不得擅自使用。

6、互联网的本质是自由与分享,我们真诚的希望,每一份有价值的正能量能够在互联网中自由传播,能够为每一个网站提供动力。

标签:
精品源码
  • 种子溯源系统,一物一码防伪验证查询(单用户版) 支持定制开发

    惊爆价¥1500.00

    立即购买
    种子溯源系统,一物一码防伪验证查询(单用户版) 支持定制开发
看点推荐
精选文章

站长交流群

互联网站长技术交流群
共同学习,共同进步,共同成长!

QQ交流群

推荐文章

帝国cms通过用灵动标签的SQL语句查询来调用栏目导航

帝国cms图片集字段morepic分割,自定义图片集显示

帝国cms 技巧整理笔记,持续更新中

帝国cms 技巧整理笔记:常用变量,COOKIE获取和系统模板

最新文章

热门标签

关注我们

微信扫一扫,关注更多精彩

  • 公众号
    全面掌握源码一手资讯

  • 服务号
    精彩活动,推送提醒

垂询热线:18680688182

商务合作:0769-8700 9090
文章投稿: