谷歌网页翻译
先说背景
//推荐一个github项目：https://github.com/hujingshuang/MTrans
因此有没有一种简单易用的及时翻译插件，类似于谷歌浏览器自带的翻译工具那种，一点即可全文翻译。
最后在网上找到了一些，要么没有文档介绍，要么就需要npm安装，nodejs支持啥的，但是我对前端并不精通，就继续找，最后找到了谷歌插件(官方已经不再维护更新：https://translate.Google.com/manager/website/)，简单易用。
使用方法，在页面加入以下代码即可
//更新一下2019-04-10
一个简单的demo
<html>
<body>
我爱你
<!--把button放在右下角，这个是可以随意修改的，你可以改成一个链接一个图片之类的-->
<p id="google_translate_element" style="position:absolute;bottom:10px;right:10px;z-index:2000;opacity:0.7"></p>
<script>
function googleTranslateElementInit() {
new google.translate.TranslateElement(
{
//这个是当前页面的原语言，便于插件精确翻译
pageLanguage: 'zh-CN',
//这个是你需要翻译的语言，比如你只需要翻译成越南和英语，这里就只写en,vi
includedLanguages: 'en,zh-CN,hr,cs,da,nl,fr,de,el,iw,hu,ga,it,ja,ko,pt,ro,ru,sr,es,th,vi',
//选择语言的样式，这个是面板，还有下拉框的样式，具体的记不到了，找不到api~~
layout: google.translate.TranslateElement.inlineLayout.SIMPLE,
//自动显示翻译横幅，就是翻译后顶部出现的那个，有点丑，这个属性没有用的话，请看文章底部的其他方法
autodisplay: true,
//还有些其他参数，由于原插件不再维护，找不到详细api了，将就了，实在不行直接上dom操作
},
'google_translate_element'//触发按钮的id
);
}
</script>
<script src="https://translate.google.cn/translate_a/element.js?cb=googleTranslateElementInit"></script>
</body>
</html>
没错，这样就行了，来看看页面效果：
demo效果：
真实项目效果：
效果非常好。
直接访问的google资源，时不时会出现加载失败或时间太长等问题，所以建议将静态资源下载下来放到本地，
之前给出过一份修改后的js，但是还是需要自己修改不能直接使用，不太友好，建议自己下载，注意网络资源只有一个js，其他js文件是通过代码方式进行实时加载，所以需要更改原始js，这里不再详述，大概需要这些资源
注意各个js的加载路径，然后element_main.js就是那个翻译main_zh-CN.js的信息
==========================追更20180914==========================
今天又遇见一个问题，记录下，是关于清除cookie的。
由于原生google翻译插件样式不太友好，所以自己用代码追加覆盖原来的样式,
改成一个工具栏，并且去除原来顶部的操作框（参数autoDisplay：false即可，如无效请看文章底部的其他处理方法），
去除这个顶部操作框
改成这种
工具栏html,只是个例子
<p id="toolbox" class="toolbox" @click="hideFeedback()">
<ul @click.stop>
<li id="google_translate_element">
</li>
<li class="qr-code">
<img src="${staticPath}/static/images/APP.svg"/>
<p>APP</p>
</li>
<p class="qr-code-wrap">
<img src="${staticPath}/static/images/QR-Code.jpg"/>
</p>
<li @click.capture="toFeedback()">
<img src="${staticPath}/static/images/feedback.svg"/>
<p>Feedback</p>
</li>
<li @click.capture="scrollTop()">
<img src="${staticPath}/static/images/scrolltop.svg"/>
<p>Top</p>
</li>
</ul>
<p id="feedback" v-show="feedbackShow">
<p class="shade-bg"></p>
<p class="signin-wrap">
<p class="signin-container">
<p class="signin-content" @click.stop>
<p class="signin-header">Feedback</p>
<p class="signin-body">
<form class="signin-form">
<label>` + i18n['feedbackContent'] + `</label>
<textarea name="feedbackContent" v-model="feedbackContent" placeholder="please input feedback content..."></textarea>
<p class="submit" @click="feedbackSubmit">` + i18n['button.feedbackSubmit'] + `</p>
</form>
</p>
</p>
</p>
</p>
</p>
</p>
var googleTranslate;
googleTranslate = new google.translate.TranslateElement(
{
layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
autoDisplay:false
},
'google_translate_element'
);
但是去了顶部操作框后，必须加一个清除翻译的按钮，经测试发现，谷歌翻译插件的翻译生命周期存于cookie中，
所以这里我加了一个清除按钮，访问页面时先getCookie("googtrans")，如果有值就添加一个按钮
<template v-if="googtrans && googtrans!=''"><p class="lang-change" @click="cleartrans"><span>ClearG</span></p></template>
点击按钮就清除cookie并且刷新
...
cleartrans: function(){
delCookie("googtrans");
window.location.reload();
}
...
//这里一定要注意，cookie三要素：时间，路径，域名，
//删除cookie直接把时间设为过去的时间即可
function getCookie(name) {
var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
if (arr = document.cookie.match(reg))
return unescape(arr[2]);
else
return null;
}
function delCookie(name) {
var Days = 30;
var exp = new Date();
exp.setTime(exp.getTime() - Days * 24 * 60 * 60 * 30);
//这里一定要注意，如果直接访问ip的话，不用注明域名domain
//但访问的是域名例如www.baidu.com时，翻译插件的cookie同时存在于一级和二级域名中
//即删除翻译cookie时要把domain=www.baidu.com和domain=.baidu.com两个cookie一起删除才行
var domain = document.domain;
var domainIsIp = false;
var dd = domain.split(".");
if(dd.length==4){
domainIsIp=true;
}
document.cookie = name + "='';path=/;expires="+ exp.toUTCString();
if(domainIsIp==false){
domain="."+dd[1]+"."+dd[2];
document.cookie = name + "='';domain="+domain+";expires="+exp.toGMTString()+";path=/";
}
}
大功告成~
==========================2019-01-26追更==========================
有网友比较关心样式和初始化语言的问题，因为虽然功能不错但是原样式太丑了，这里统一回复一下怎么改样式，首先注意几点：
1、原版插件不再维护更新，之前给过一份静态资源但评价不太好，且源码混淆严重，阅读困难，修改不易，请自行下载修改静态资源
2、关于初始化语言，因为pageLanguage: 'zh-CN'这个参数就是用来指定当前页面的初始语言，一开始就是英文页面那当然是en
3、有网友表示autoDisplay:false无法去除顶部横幅，这里给出其他方法，通过控制台分析html，然后使用自己的style覆盖掉原来的样式即可
<style>
body{
top:0px!important;
min-height: 0px!important;
}
.goog-te-banner-frame{
display:none
}
</style>
4、语言翻译生命周期是存在cookie中的，清除修改翻译语言什么的，可以直接修改cookie，但是记得操作cookie后要刷新页面才会生效
==========================2019-08-15统一回复样式问题==========================
根据评论，原样式有如图三个问题
解决方式如下（因缺失API官方文档，都是无奈之下的强制操作，源码大部分逻辑操作在element_main.js中）：
<style>
/*解决问题3*/
body{
top:0px!important;
min-height: 0px!important;
}
/*解决问题2*/
.goog-text-highlight{
background-color: transparent!important;
-webkit-box-shadow: 0 0px 0px rgba(0, 0, 0, 0)!important;
-moz-box-shadow: 0 0px 0px rgba(0, 0, 0, 0)!important;
box-shadow: 0 0px 0px rgba(0, 0, 0, 0)!important;
}
/*解决问题1*/
.goog-te-banner-frame{
display:none
}
</style>
相关阅读
Socket编程（C语言实现）——基于TCP协议，基于UDP协议(多线
Socket编程 目前较为流行的网络编程模型是客户机/服务器通信模式 客户进程向服务器进程发出要求某种服务的请求，服务器进程响应该
声明：本文中图片资料和部分文字材料引自网络，仅为自己学习记录和供网络学习者分享，侵删。 目录 什么是人工神经网络（ANN）? 人工神经元
LevelDb日知录之一：LevelDb LevelDb由两位是Google公司重量级的工程师：Jeff Dean和Sanjay Ghemawa 发起。 Jeff Dean：Google大规
import com.alibaba.fastjson.JSON;import com.alibaba.fastjson.JSONArray;import com.alibaba.fastjson.JSONObject;import io.
荆轲刺秦王 在制作网页的时候,我们可能会有这样的需求:比如 我们需要做一个小箭头,最简单的办法就是直接用数学符号:">",但是这