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

news/2024/5/20 3:31:03/文章来源:https://blog.csdn.net/weixin_36130575/article/details/113027168

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

https://translate.google.com/...

和一段代码:

下面是官方给出的代码:

下面是我改良的代码:

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

}

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

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的可选参数如下:

e7cc198bd089e6e37fe527c0b81e3d7f.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_837828.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

mysql迅_soxuncms 搜迅电影系统php版是一套采用PHP+MySQL环境搭建的智能建站 ,拥有海量 片信息, Web Server 266万源代码下载- www.pudn.com...

文件名称: soxuncms下载 收藏√ [5 4 3 2 1 ]开发工具: PHP文件大小: 3820 KB上传时间: 2016-10-30下载次数: 0提 供 者: npg详细说明:搜迅电影系统php版是一套采用PHPMySQL环境搭建的智能建站系统,拥有海量的影片信息,本站坚持每月都有…

nginx服务器带宽_如何利用nginx搭建一个简单的文件下载网站?

12月21日 因为时间关系写的并不是特别详细,后续会补充前期准备1、首先你需要有一台云服务器腾讯云服务器购买【腾讯云】云产品限时秒杀,爆款1核2G云服务器,首年99元其实我个人比较推广下面这款(性价比高):【…

软件测试:测试一个网站

一、软件测试的原则 1、软件测试应尽早执行,并贯穿于整个软件生命周期 2、软件测试应追溯需求 3、测试应由第三方来构造 4、穷举测试是不可能的,要遵循 Good-enough 原则 5、必须确定预期输出(或结果) 6、必须彻底检查每个测试结果 7、充分注…

网站服务器放置地怎么填,域名备案服务器放置地怎么填

域名备案服务器放置地怎么填 内容精选换一换通过华为云备案,需要先购买华为云中国大陆节点服务器,用于网站备案使用,后称为“备案服务器”。目前可用于华为云备案的服务器,请参见备案服务器。如果您的华为云帐号A中没有可备案的服…

使用Apache服务部署静态网站

10.1 网站服务程序 1970年,作为互联网前身的ARPANET(阿帕网)已初具雏形,并开始向非军用部门开放,许多大学和商业部门开始接入。虽然彼时阿帕网的规模(只有4台主机联网运行)还不如现在的局域网成…

记一次企业邮官网SEO优化

背景: 百度搜索 网易企业邮箱 会出现m.qiye.163.com 排名在前的问题 解决办法 在pc和m站分别加入 、mobile applicable-device标注可以帮助百度识别网站是PC站还是M站,给百度提交提交校验识别结果的正确性,减少百度蜘蛛把PC站当成M站&…

nginx配合前端实现网站分流 ABtest

前端随机生成0-99的cookie,通过nginx分配10%的流量 nginx配置 前端生成cookie (function(){function random(min, max) {return Math.floor(Math.random() * (max - min)) min;}function setCookie(name, value, days) { // 设置cookie days设置过期时间 单位:天…

懂点网站交互(1):网站设计准则

别让我思考 这是网站交互设计中最最最重要的原则——它是设计中判别什么有用,什么没用的终极法则。 这意味着,当读者看到一个页面时,它应该是不言而喻、一目了然、自我解释的。 即读者能“明白它”——知道它是什么意思,怎样用…

spring boot和spring cloud 开发必备工具准备 和 必备网站导航

spring boot和spring cloud 开发必备工具准备 和 必备网站导航 本文主要介绍spring cloud开发前期准备,为以后学习和开发有一些资料保障: 常用网站: spring boot 官网英文网站,有一些简单和详细的介绍 http://projects.spring.…

懂点网站交互(3):广告牌设计101法则

在上篇文章 懂点网站交互(2):我们实际上是如何使用web的 我们可以了解到实际上用户浏览网站时并不会按我们假定的方式,而是飞快的扫视而过,那么我们如何让用户了解我们的网站呢? 1.尽量利用习惯用法 2.建立…

VUE项目实践--网站管理系统

使用vue-cli来构建一个vue项目 什么是vue-cli?有了它我们还需要webpack吗? 通过几天的学习都知道webpack的使用难度真的有点高,而且文档又很难阅读。而vue-cli是一个可用帮助我们直接进行开发vue的脚手架(帮助我们建立项目框架&…

【Hexo】如何才能在百度搜索到你的博客?SEO优化了解一下(上)

关于Hexo的一切 —— 我的Hexo专栏 零 前言 SEO,即Search Engine Optimization,译为搜索引擎优化。 它是一种利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名的方式。 继上篇域名绑定,这篇我们来聊聊如何才能在百度搜索到你的Hexo博客…

用python爬取需要cookie信息的网站

本次创作实验网站:实验网址 本次创作语言:python2 编译用到的工具:pycharm,Fiddler 首先我们打开这个网站,不难发现,在高级检索目录下的内容是需要登录后才能获取到的,所以我们需要先注册账号…

wordpress 网站迁移步骤

1.在就网站服务器上备份要迁移的网站,并上传到新的服务器上 2.在旧网站服务器上备份数据库,并导入到新的服务器的数据库中 3.打开wp_config.php文件,修改相应的数据库配置信息 4.打开新服务器上的数据库,找到wp_options表&…

转 PHP网站从Apache转移到Nginx后产生404错误的原因和解决办法

转 PHP网站从Apache转移到Nginx后产生404错误的原因和解决办法 原文地址链接:http://www.linuxidc.com/Linux/2014-06/103103.htm 原案例分析: 1、原来的网站在wamp环境下搭建完成,一切正常,上传到虚拟主机环境为lnmp&#xff…

WordPress 迁移网站以后,后台和首页正常,但是内容页出现404错误

在迁移WordPress博客的过程中,遇到不少问题,迁移有以后,后台正常,首页正常,就是其他页面全部404错误。 经过不懈努力总算是解决了这个问题.这里分享一下,这次是如何解决404错误的。 1、登录后台&#xff…

解决使用 YoastSEO 生成的 XML 站点地图报 404 Not Found 的问题

解决使用 YoastSEO 生成的 XML 站点地图报 404 Not Found 的问题 操作环境 服务器操作系统:Ubuntu Linux Web 服务器:Nginx 或 Apache Web 应用:WordPress 我使用的固定链接形态为“朴素”型,如下: https://zhao…

把个人网站封装生成百度小程序的方法分享

现在百度大力发展移动端,所以百度智能小程序有一定的流量优势,还可以进入信息流和贴吧推广,同时还能获得网站快速收录权限,昨天已封装成功,今天跟大家分享把个人网站封装生成百度小程序的方法。 一、生成小程序的前提条…

优秀的网站加速插件 – WP rocket详细设置教程

WP rocket是一款优秀的网站速度优化的插件,用于对网站内容进行缓存,它的设置比较简单,效果很好,今天Hunk就把WP rocket的详细配置教程写出来。 本文示范的wp rocket版本是3.1.4 WP rocket的界面语言跟你的WP后台语言一致&#x…

WordPress – wp-rocket插件的简单设置以及如何加速网站

wp-rocket这个插件还是通过wordpress的PHP运行来提供缓存,所以说还是不能绕开PHP直接加速,这个插件使用者众多,是非常火爆的一款缓存插件,网上的教程也非常多,这里大鸟记录下自己配置的过程。 具体的配置 wp-rocket学…