给自己的网站接入谷歌翻译,以及修复了一个谷歌翻译的一个bug

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

下面是官方给出的代码:

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

下面是我改良的代码:

<script>
function googleTranslateElementInit() {
    var google_translate_element = document.getElementById('google_translate_element');
    var timer = setInterval(function() {
        google_translate_element = document.getElementById('google_translate_element');
        if (google_translate_element) {
            clearInterval(timer);
            var langName = navigator.language ? navigator.language.split('-')[0].toLowerCase() : 'en';
            new google.translate.TranslateElement({
                    pageLanguage: langName,
                    //0,原生select,并且谷歌logo显示在按钮下方。1,原生select,并且谷歌logo显示在右侧。2,完全展开语言列表,适合pc,
                    layout: /mobile/i.test(navigator.userAgent) ? 0 : 2,
                },
                'google_translate_element'
            );
            // 清除图片的请求
            img = [].slice.call(document.querySelectorAll('#goog-gt-tt img,#google_translate_element img'));
            img.forEach(function(v, i) {
                v.src = '';
            });
        }
    }, 300);
}
</script>
<script id="translate_google_js" src="//translate.google.cn/translate_a/element.js?&cb=googleTranslateElementInit"></script>

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

1,为什么用定时器轮询?
根据自己的网站布局,这个div可能是其他js动态添加,此时调用不一定存在。

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

3,为什么要判断移动端和pc端?
发现插件本身的pc效果并不会自动兼容移动端。所以这里根据浏览器代理判断移动端来实现:移动端使用原生select进行加载。

4,为什么把translate.google.cn中的com改成了cn?
理由同2

5,为什么element.js?&cb=googleTranslateElementInit的cb前面加了个and符号?
猜测和js中的某些正则匹配有关。不带这个&,则回调函数不会被调用。

3的可选参数如下:

clipboard.png


前端黑科技
前端那些你不知道,又必须掌握的小技巧

I'm jsoncode

3.9k 声望
780 粉丝
0 条评论
推荐阅读
nodejs递归文件夹获取所有文件路径
读取文件夹 {代码...} 判断文件类型 {代码...} 路径拼接 {代码...} 封装 {代码...}

jsoncode阅读 546

从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木149阅读 12.3k评论 10

正则表达式实例
收集在业务中经常使用的正则表达式实例,方便以后进行查找,减少工作量。常用正则表达式实例1. 校验基本日期格式 {代码...} {代码...} 2. 校验密码强度密码的强度必须是包含大小写字母和数字的组合,不能使用特殊...

寒青54阅读 7.8k评论 11

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy46阅读 6k评论 12

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木66阅读 6.2k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.3k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木43阅读 7.4k评论 6

I'm jsoncode

3.9k 声望
780 粉丝
宣传栏