Question

如何在网页代码里使用JS实现谷歌浏览器自动翻译

能否调用谷歌浏览器API，使谷歌浏览器能自动对当前网页进行翻译？而不是自己获取英文后一条条发送请求，调用谷歌API获取中文

Answer 1

Google 翻译网页功能可以在包括中文和英文的35种语言之间实现整个网页的翻译。当你点击此按钮时，它会自动识别当前网页的语言，把它的内容上传到Google的翻译服务器翻译成用户浏览器设置的语言，，再将翻译结果用原有的网页格式显示出来。这时，该按钮的文字显示会变成“原始网页“，并且会在网页最上端出现一个信息条。如果你想把网页译成其它语言，你可以在信息条上改动翻译语言。另外，你如果点击已翻译网页上的任何链接，并且链接的网页的语言非浏览器设置语言的话，该功能会自动翻译链接网页。你可以点击“原始网页“或者点击信息条上的“X”键关掉信息条，网页就会回到翻译前的状态。

另外，Google工具栏还有字词翻译和划词翻译的功能。“翻译网页”图标旁的下拉菜单会显示两种功能的设置，即字词翻译和划词翻译。启用字词翻译功能后，将光标悬停在一个字词上，就能查看其翻译。若启用划词翻译，当你用鼠标高亮一串单词时，会在这些文字旁出现对整串文字的翻译

Answer 2

#默认隐藏的翻译选择窗口
<div 
style='display:none;position:absolute;z-index:5;right:120px;height:57px;
background-color:#4CAF50;text-align:right;padding-top:15px;' 
id='google_translate_element'>
</div>
#翻译入口按钮
<a 
class="btn_style" 
href="javascript:void(0)" 
onclick="open_translate(this)" 
title='谷歌翻译'>
<i class='fa'>&#xe801;</i>
</a>
#js代码
<script>
/*按钮触发的函数，打开或关闭翻译窗口*/
function open_translate(elmnt) {
  var a = document.getElementById("google_translate_element");
  if (a.style.display == "") {
    a.style.display = "none";
    elmnt.innerHTML = "<i class='fa'>&#xe801;</i>";
  } else {
    a.style.display = "";
    if (window.innerWidth > 830) {
      a.style.width = "20%";
    } else {
      a.style.width = "60%";
    }
    elmnt.innerHTML = "<span style='font-family:verdana;font-weight:bold;display:inline-block;width:21px;text-align:center;'>X</span>";
  }
}
/*--------翻译参数？？？？？？？？？？？？？-------*/
function googleTranslateElementInit() {
  new google.translate.TranslateElement({
  pageLanguage: 'en',
  autoDisplay: false,    
  gaTrack: true,
  gaId: 'UA-3855518-1',
  layout: google.translate.TranslateElement.InlineLayout.SIMPLE
  }, 'google_translate_element');
}
</script>
/*----------这个要引用---------------------------------------*/
<script src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>