구글번역기를 모바일에 붙일 때 질문입니다.
본문
안녕하세요.
구글번역기를 그누보드에 붙이기 위해서
그누를 검색해보니
묵공님이 자상하게 소스까지 잘 준비해주셨더라구요.
그런데 이게 웹에서는 잘되는데
모바일에서는 잘 안됩니다.
웹에서는 가령, 영어를 선택하면 쿠키가 적용되는지 다른 페이지로 이동할 때도 영어로 번역되는데
(제가 원하는게 바로 이겁니다. 페이지 이동시에도 선택한 언어로 번역되는 것)
모바일에서는 버튼클릭해도 적용되지 않고 일본어로만 번역돕니다.
테마>basic>모바일>head.php에 묵공님 소스를 붙였을 때....
그래서 찾다보니
<div id="google_translate_element"></div>
<script src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'kr' , includedLanguages : 'kr,en,ja,es,de,zh-CN,fr'}, 'google_translate_element');
}
</script>
이 소스를 붙이니 모바일에서도 셀렉트(드롭다운)로 언어선택을 해서 번역이 제대로 되는데
이 경우에는 다음페이지로 넘어갈 때 마다....
언어선택을 해줘야 하는 불편함이 있군요.
---------------
모바일에서 드롭다운리스트 한번하면 지속적으로 그 언어로 구글번역기가 작동되도록 하려는데,,,,,
가능할까요?
--아래는 웹에서는 제가 원하는대로 잘 작동되는 묵공님 코드---
<!--구글 웹사이트 번역 플러그인 [s] -->
<style type="text/css">
iframe.goog-te-banner-frame { display: none !important; } /* 상단 플로팅 바 옵션 가리기 */
body { position: static !important; top:0px !important; }
.goog-logo-link { display:none !important; }
.goog-te-gadget { color: transparent !important; }
</style>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'ko', includedLanguages: 'de,en,ja,ko,zh-CN', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay: false, multilanguagePage: true}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<script type="text/javascript">
$(window).load(function () {
$('.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;
});
});ko
</script>
<div id="google_translate_element" style="visibility: hidden; position: absolute; top: 0px;"></div>
<div class="translation-icons" style="visibility: hidden; position: relative; text-align: right; margin:0 auto; padding-right: 15px; width: 970px; zoom:1">
<img src="<?php echo G5_IMG_URL?>/google_translate_logo.png" alt='구글 번역 api'/>
<a href="#" class="ko" data-placement="0"> <img src="<?php echo G5_IMG_URL?>/KR.png" alt='한국'/></a>
<a href="#" class="gm" data-placement="1"> <img src="<?php echo G5_IMG_URL?>/GM.png" alt='독일'/></a>
<a href="#" class="us" data-placement="2"> <img src="<?php echo G5_IMG_URL?>/US.png" alt='미국'/></a>
<a href="#" class="jp" data-placement="3"> <img src="<?php echo G5_IMG_URL?>/JP.png" alt='일본'/></a>
<a href="#" class="cn" data-placement="4"> <img src="<?php echo G5_IMG_URL?>/CN.png" alt='중국'/></a>
</div>
<!--구글 웹사이트 번역 플러그인 [e] -->
답변 1
테스트는 못해보지만, 영어로 검색을 해 봐도, 정확한 내용을 찾기가 어렵긴하네요.
https://www.soluntech.com/blog/how-to-implement-google-translate-widget-in-knack
를 보면, 스크립트 로딩을 딜레이하는 것이 있는데, 이것도 관련이 있을 수도.. (PC는 빠르지만, 모바일에서는 조금 느려서 동작이 제대로 안될 가능성)