Javascript GoogleTranslateWidget에 대해...

무료 버전(구 버전)으로 구글 번역 위젯을 사용할 일이 있었는데 이게 참 골치가 아프다.

 

사용하면서 몇 가지 요구사항을 쳐내면서 발견한 것을 작성한다.

 

1. 특정 단어 번역 안하기

번역하지 않을 Element의 class에 "notranslate"을 추가한다.

위젯을 로드하기 전에 class가 등록되어 있어야 한다.

 

2. 마우스 호버 이벤트 제거 (단어 위에 마우스를 올리면 단어 번역창이 뜨는 것을 제거하는 방법)

무료 버전에서는 사실 제거가 불가해보인다.

CSS로 해당 부분을 제거했다.

<style>
  #goog-gt-tt {
    display: none !important;
  }
  #goog-gt- {
  	display: none !important;
  }
  .VIpgJd-yAWNEb-VIpgJd-fmcmS-sn54Q {
    background-color: transparent !important;
    box-shadow: none !important;
  }
</style>

3. 번역 언어만 사용

특정 언어만 리스트업 하고 싶은 경우 다음과 같이 설정한다.

// googleTranslate
new google.translate.TranslateElement({
    // pageLanguage: 'en',                  // 페이지 언어 설정
    includedLanguages: 'en,ru,vi,zh-CN',    // 사용할 언어 LIST
}, 'google_translate_element');             // selectbox div의 id

4. 원문보기, 번역기 닫기 강제 실행(강제 클릭)

// 구글 번역기 TOPBAR 선택
const skiptranslate = document.querySelector('.skiptranslate');
const gtlTopbar = skiptranslate.querySelector('iframe');

// 1. 구글 번역기 강제 종료
const close = gtlTopbar.contentDocument.getElementById(':1.close');
close.click();

// 2. 구글 번역기 강제 원문보기
const reset = gtlTopbar.contentDocument.getElementById(':1.restore');
reset.click();

5. 특정 언어로 강제변경

// google translate widget select box
const gtlSelectElement = document.querySelector('.goog-te-combo');

// 언어 변경
gtlSelectElement.value = '변경할 언어의 value';

// 변경 이벤트 강제 발생
gtlSelectElement.dispatchEvent(new Event('change'));

 

사실 이번 프로젝트에서 요상하게 커스텀을 요청해서 사용했던 꼼수가 많았는데

 

요정도만 범용적으로 사용될 것 같아 여기까지 작성한다.

 

구버전 무료 위젯이긴 하지만 방식이 참 이해가 안되는 놈인지라...

 

아무튼 오늘은 여기까지 알아보겠다.

 

뿅