제목 :  구글 다국어 지원 - 스크립트


소스 :

 

<!doctype html>
<html lang="ko">
 <head>
  <meta charset="UTF-8">
  <title>구글 다국어 지원</title>
 </head>
 <body>
최근 전 세계 웹 브라우저 시장에서 크롬의 약진이 무섭다. 지난 2008년 출시하자마자 독주하던 인터넷 익스플로러(IE)의 점유율을 잠식하더니 최근 점유율 1위를 기록한 것. 2위로 물러난 IE는 점차 점유율을 높여 가고 있는 파이어폭스(3위)에게도 위협받고 있다. 그렇다면 이들 웹 브라우저는 어떤 강점이 있을까. 크롬·IE·파이어폭스·사파리·오페라 등 대표적인 웹 브라우저의 특징을 살펴봤다. <br>
<div id="google_translate_element">
    </div>
        <script type="text/javascript">
            function googleTranslateElementInit() {
                new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'ar,de,en,fr,ru,zh-CN', 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>
</div>
 </body>
</html>

 




내용 :

 

위 script 의 내용 중

 

  function googleTranslateElementInit() {
   new google.translate.TranslateElement({pageLanguage: 'ko', includedLanguages: 'ar,de,en,fr,ru,zh-CN', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, multilanguagePage: true}, 'google_translate_element');
  }

 

은 includedLangguages 옵션을 사용하여, 번역할 국가를 선택한 것만 노출되도록 한다.

 

---------------------------------------------------------------------------------------------------------

아래 script는 번역가능한 전체 국가 목록이 selectbox list 형태로 노출된다.

 

function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'ko'
  }, 'google_translate_element');
}

 

---------------------------------------------------------------------------------------------------------

아래는 selectbox 클릭시 전체 국가명이 div 형태로 노출됨

function googleTranslateElementInit() {
 new google.translate.TranslateElement({
  pageLanguage: 'ko',
  autoDisplay: false,
  gaTrack: true,
  layout: google.translate.TranslateElement.InlineLayout.SIMPLE
 }, 'google_translate_element');
}
 

---------------------------------------------------------------------------------------------------------

위 스크립트 실행시 브라우저 상단에 구글 툴바 형태로 '번역' 관련 레이어가 보이는데,

아래 style 을 주면, 해당 레이어가 사라짐.

 

<style>

.goog-te-banner-frame.skiptranslate {display: none !important;}
body { top: 0px !important; }

</style>


예제 소스 파일 : test2.html


 


 

Posted by 잠수콩