구글 번역 기능 붙이기
페이지 정보
작성자 최고관리자 작성일 23-08-24 00:21 조회 32 댓글 2본문
<div class="box_aside">
<div id="google_translate_element" style="display:none;"></div>
<!-- "새 번역 링크 UI" -->
<ul class="translation-links">
<li><a href="javascript:void(0)" class="english" data-lang="en" title="English"><span class="flag en"><img src="https://quickapostille.co.kr/img/tablist_1_1.png"></span><span>영어</span></a></li>
<li><a href="javascript:void(0)" class="japanese" data-lang="ja" title="日本語"><span class="flag ja"><img src="https://quickapostille.co.kr/img/tablist_3_15.png"></span><span>일본어</span></a></li>
<li><a href="javascript:void(0)" class="japanese" data-lang="zh-CN" title="中文(简体)"><span class="flag zh-CN"><img src="https://quickapostille.co.kr/img/tablist_3_16.png"></span><span>중국어(간체)</span></a></li>
<li><a href="javascript:void(0)" class="japanese" data-lang="zh-TW" title="中文(繁體)"><span class="flag zh-TW"><img src="https://quickapostille.co.kr/img/tablist_3_16.png"></span><span>중국어(번체)</span></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');}
/* 새 UI 선택 클릭 이벤트가 발생하면
감춤 처리한 구글 번역 콤보리스트에
선택한 언어를 적용해 변경 이벤트를 발생시키는 코드 */
document.querySelector('.translation-links').addEventListener('click',function(event) {
let el = event.target;
if(el != null){
while(el.nodeName == 'FONT' || el.nodeName == 'SPAN'){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>
</div>
