Javascript实现网页无刷新翻译&做成Bookmarklet（书签工具）
最近要做网站的在线翻译功能，但网上的代码都不太好用，都是整个页面一起刷新的。所以我就自己通过翻译网站的API写了这个翻译功能，并且可以做成Bookmarklet（书签工具），就算不用在网站也能用于访问其他的网页。这次因为要考虑到书签工具的问题，所以没有使用到Javascript的扩展库，但如果你觉得翻译网站自带的样式太难看，你也可以用Javascript来重写它。
我调用了2个翻译网站的翻译接口，它们分别是必应和谷歌。其实我只在项目中使用了必应翻译的功能，但后来做有SSL（就是以Https方式访问）的登录页面和Bookmarklet时就发现必应翻译并不能翻译有SSL的网站。一直以来我都有用谷歌翻译来手动翻译网页的，也清楚它能翻译有SSL的网站，然后我又在项目中实现了谷歌翻译的功能。就这样，我实现了2个翻译的功能。
范例代码：
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>页面翻译范例</title>
</head>
<body>
<script>
function BingTranslate(){ //必应翻译
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://labs.microsofttranslator.com/bookmarklet/default.aspx?f=js&to=zh-chs';
document.body.insertBefore(script, document.body.firstChild);
}
function GoogleTranslate(){ //谷歌翻译，本地运行有可能无反应
document.cookie = "googtrans="+ escape ("/auto/zh-CN") + ";expires=0"; //设置默认翻译语言
if(document.getElementById('google_translate_element')){
return false;
}
var link = document.createElement('script');
link.type = 'text/javascript';
link.src = 'https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit';
document.body.insertBefore(link, document.body.firstChild);
var script = document.createElement('script');
script.type = 'text/javascript';
script.text = 'function googleTranslateElementInit(){new google.translate.TranslateElement({pageLanguage:"",layout:google.translate.TranslateElement.InlineLayout.SIMPLE},"google_translate_element")};';
document.body.insertBefore(script, document.body.firstChild);
var div = document.createElement('div');
div.id = 'google_translate_element';
div.innerText = '';
div.style.display = 'none'; //隐藏语言选框，某些情况下会出现这个多余的选框
document.body.insertBefore(div, document.body.firstChild);
}
</script>
<div><a href="javascript:BingTranslate();">必应翻译</a><a href="javascript:GoogleTranslate();">谷歌翻译</a></div>
<p>This is an online translator that provides accurate translations between 75 different languages including English, Spanish, <b>Chinese</b> and more.</p>
</body>
</html>书签工具的添加方法：
[重要说明]
以下翻译工具的Javascript代码只在Chrome下测试通过。所以我只放出Chrome的添加书签工具的图文教程，其他浏览器同理。
先打开Chrome浏览器，然后在右上角找到“三横杠”再找到“书签管理器”。
再打开“书签管理器”后，在“书签栏”项右键点击“添加网页”。
然后右边书签列表最下面会出现一个新增的书签。
在“名称”处填入书签工具的名称，在“网址”处填入上面提供的翻译接口的Javascript代码。
[必应翻译]
javascript:(function(){var script=document.createElement("script");script.type="text/javascript";script.src="https://labs.microsofttranslator.com/bookmarklet/default.aspx?f=js&to=zh-chs";document.body.insertBefore(script,document.body.firstChild)})();[谷歌翻译]
javascript:(function(){document.cookie="googtrans="+escape("/auto/zh-CN")+";expires=0";if(document.getElementById("google_translate_element")){return false}var link=document.createElement("script");link.type="text/javascript";link.src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit";document.body.insertBefore(link,document.body.firstChild);var script=document.createElement("script");script.type="text/javascript";script.text='function googleTranslateElementInit(){new google.translate.TranslateElement({pageLanguage:"",layout:google.translate.TranslateElement.InlineLayout.SIMPLE},"google_translate_element")};';document.body.insertBefore(script,document.body.firstChild);var div=document.createElement("div");div.id="google_translate_element";div.innerText="";div.style.display="none";document.body.insertBefore(div,document.body.firstChild)})();
填写完后就点击下其他地方，它就会自动保存了。
经过上面的步骤就设置好了书签工具了，接着就是使用工具。先打开一个你需要翻译的网页，再从书签里面找到刚刚设置的翻译工具，然后点击即可自动翻译。
最后再低调补充一句，使用谷歌翻译有时会因为墙的问题而导致翻译失败。
I couldn't resist commenting. Perfectly written!
The details talked about in the post are several of the best offered.
Thanks for finally writing about this article, Loved it!
We're a bunch of volunteers and starting a new scheme in our community.
Your site provided us with helpful info to work on. You have done a formidable job and our entire group shall be grateful to you.
Inspiring quest there. What occurred after?
Good luck!