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:(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)})();

在“名称”处填入书签工具的名称,在“网址”处填入上面提供的翻译接口的Javascript代码。

填写完后就点击下其他地方,它就会自动保存了。

经过上面的步骤就设置好了书签工具了,接着就是使用工具。先打开一个你需要翻译的网页,再从书签里面找到刚刚设置的翻译工具,然后点击即可自动翻译。

最后再低调补充一句,使用谷歌翻译有时会因为墙的问题而导致翻译失败。

标签:工具, 实现, javascript, 网页, 无刷新, 翻译, bookmarklet, 书签

该文章由 Shiqi 原创并发布在 被遗忘的曙光 技术博客

转载请标明来源:https://blog.fdawn.com/Front-End/24.html

已有 29 条评论

  1. jimdo

    Hey very cool website!! Guy .. Beautiful .. Superb .. I will bookmark your web site and take the feeds additionally?

    I am glad to search out so many helpful info here in the submit,
    we'd like work out more strategies in this regard, thank you for sharing.
    . . . . .

  2. gracevig

    This is the perfect website for everyone who wants to find out about this topic.
    You understand a whole lot its almost hard to argue with you
    (not that I personally will need to?HaHa). You definitely put a new spin on a subject that has been written about for
    decades. Wonderful stuff, just wonderful!

  3. taller-people

    I drop a comment whenever I especially enjoy a
    article on a website or I have something to valuable
    to contribute to the discussion. It's triggered by the fire communicated in the post
    I read. I was actually excited enough to drop a thought ;) I do have 2 questions for you if it's allright.
    Is it just me or do a few of these remarks come across
    like they are left by brain dead people? :-P And, if you are posting at
    other online social sites, I'd like to keep up with anything fresh you have to
    post. Would you make a list all of your communal sites like your twitter feed,
    Facebook page or linkedin profile?

  4. snack

    Just what I was looking for, thanks for posting.

  5. ameblo

    Loving the information on this web site, you have done great job on the
    articles.

添加新评论