自訂化google網頁翻譯(updated 2016/12/07)

知道google有提供網站翻譯工具，在選擇好網頁原始語言跟想要轉換的語言之後，可以產出一段原始碼(如下)

 <div id="google_translate_element"></div>  
 <script type="text/javascript">  
 function googleTranslateElementInit() {  
  new google.translate.TranslateElement({pageLanguage: 'zh-TW', includedLanguages: 'en,ja,ko,zh-CN,zh-TW', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, multilanguagePage: true}, 'google_translate_element');  
 }  
 </script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>  

不過…google給的東西很制式化(google的東西不是應該給個api來做自由度嗎?)，很直接的下拉式選單

但如果我自己想用自己的切換方式而不是google提供的，那怎麼做?


我參考了http://stackoverflow.com/questions/10486833/implementing-google-translate-with-custom-flag-icons/12999313#12999313

 $('.translation-icons').css('visibility', 'visible');  
     $('.translation-icons a').click(function(e) {  
       e.preventDefault();  
       var placement = $(this).data('placement');  
       var lang_num = $('.translation-icons a').length;  
       var $frame = $('.goog-te-menu-frame:first');  
       if (!$frame.size()) {  
         alert("Error: Could not find Google translate frame.");  
         return false;  
       }  
       var langs = $('.goog-te-menu-frame:first').contents().find('a span.text');  
       if(langs.length != lang_num) placement = placement+1;  
       langs.eq(placement).click();  
       return false;  
     });  

主要概念是當做翻譯時，google translate提供的script會動態載入三個iframe進入你的網頁，但三個iframe沒有特定的id，class都是用「goog-te-menu-frame skiptranslate」…而我們要媒合的語系選單是放在「goog-te-menu-frame skiptranslate」的第一個，所以在它提供的selector會看到「$(".goog-te-menu-frame:first")」…只固定在第一個「goog-te-menu-frame skiptranslate」的iframe中尋找「a span.text」的link…

這裡要記住原先在的語系順序，在「class="translation-icons"」的語系連結的「data-placement」要從0開始…不過進入它提供的程式之後會把這個值先加1。

然後在點擊之後，他會依照選到的placement值然後在「goog-te-menu-frame:first」找到相對的就送出click…就會切換了…
----
不過，目前的重點其實是放在「回到原語系」…
就使用google翻譯工具的話，除非離開原網址，不然在相同url之下還是會繼續翻譯，但我想回到原語系該怎麼辦?

我們可以找到在google翻譯工具列中右邊有一個「選項」的拉式選單可一個關閉的[x]…選擇「選項」中的「對這個網站關閉翻譯功能」或[x]，就可以把工具列關閉且恢復原本的樣子…

所以，我們可以借花獻佛，右手邊的「選項」正好也是「goog-te-menu-frame skiptranslate」這個iframe的第三個(應該是最後一個)，所以我們可以把上面的程式修改一下，把「$(".goog-te-menu-frame:first")」改為「$(".goog-te-menu-frame:last")」，然後click的反應要指定到你想要關閉的按鍵或連結上…然後placement設定為0…(「對這個網站關閉翻譯功能」是在第二項，應該placement是要選1，但我測了一下有反應的是0…所以…有可能是我個人問題，要再試試)

****updated 2016/12/07
之前會放在要回到原語系並將翻譯列關掉時是把 placement 設為 0 ，但最近發現在切換翻譯語系時，要使用上述的方式，點「回首頁」會回到原語言時，並不會回去，反而是重整了網頁並另開一個 google translate 介紹的網頁…
解決的方式也很怪…我把 placement 改為 -1 就行了