구글 페이지 자동 번역 API
by mini_min
홈페이지에 번역이 필요한 경우
자동으로 구글 페이지 번역기 사용이 가능하도록 하는 API 다.
✔ "english" 라는 버튼을 누르면 아래 src 경로에 있는 구글 번역기를 타고 페이지가 번역되어 로딩된다.
✔ 페이지가 로딩되며 "english" 버튼을 자동으로 눌러주는 trigger 가 있으면 버튼을 누를 필요 없이 자동으로 번역된 페이지를 볼 수 있지 않을까?
<script src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script><%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import = "java.util.*" %>
<!DOCTYPE html>
<html lang="en" >
<meta charset="utf-8">
<style>
/*상단 플로팅 바 옵션 가리기 */
body { position: static !important; top:0px !important; }
iframe.goog-te-banner-frame { display: none !important; }
.skiptranslate { display: none !important; }
.goog-logo-link { display:none !important; }
.goog-te-gadget { color: transparent !important; overflow: hidden;}
.goog-te-balloon-frame{display: none !important;}
.goog-tooltip {display: none !important;}
.goog-tooltip:hover {display: none !important;}
.goog-text-highlight {background-color: transparent !important; border: none !important; box-shadow: none !important;}
</style>
<div id="google_translate_element" style="display:none;"></div>
<!-- "새 번역 링크 UI" -->
<ul class="translation-links">
<li><a href="javascript:void(0)" id="GoogleTranslateBtn" class="english" data-lang="en">english</a></li>
</ul>
<script src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<script type="text/javascript">
/* 구글 번역 초기화 */
function googleTranslateElementInit() {new google.translate.TranslateElement({pageLanguage: 'ko',autoDisplay: true}, 'google_translate_element');}
google_initialized = false;
function google_auto_translate()
{
if(google_initialized)
{
jQuery('a.goog-te-gadget-link')[0].click();
}
else if( jQuery('a.goog-te-gadget-link').length )
{
console.log('has button');
google_initialized = true;
setTimeout(google_auto_translate, 500);
}
else{
console.log('no button');
setTimeout(google_auto_translate, 100);
}
}
jQuery(document).ready(function(){
setTimeout(google_auto_translate, 1000);
});
</script>
<script type="text/javascript">
/* 새 UI 선택 클릭 이벤트가 발생하면
감춤 처리한 구글 번역 콤보리스트에
선택한 언어를 적용해 변경 이벤트를 발생시키는 코드 */
document.querySelector('.translation-links').addEventListener('click',function(event) {
let el = event.target;
if(el != null){
while(el.nodeName == 'FONT'){el = el.parentElement;}//data-lang 속성이 있는 태그 찾기
const tolang = el.dataset.lang; // 변경할 언어 코드 얻기
const gtcombo = document.querySelector('.goog-te-combo');
if (gtcombo == null) {
//alert("Error: Could not find Google translate Combolist.");
return false;
}
gtcombo.value = tolang; // 변경할 언어 적용
gtcombo.dispatchEvent(new Event('change')); // 변경 이벤트 트리거
}
return false;
});
</script>
'JavaScript' 카테고리의 다른 글
| [Javascript] filter 함수 (0) | 2023.04.17 |
|---|---|
| [JavaScript] 순수 자바스크립트 페이징 처리 (0) | 2022.12.08 |
| [javascript] 노드 찾기 (자식/부모/형제) / innerText, innerHTML (0) | 2022.09.26 |
| [javascript] Element 인터페이스 / Node 노드 추가 삭제 (0) | 2022.09.26 |
| [javascript] getElement 관련 함수 (0) | 2022.09.26 |
블로그의 정보
개발자 미니민의 개발로그
mini_min