[Android] 다음 우편번호 검색창을 팝업띄우지 않고 연결하기

안드로이드와 아이폰상에서, WebView 형태로 하이브리드앱을 개발할때, 웹상에서 늘상 쓰는 다음 우편번호 javascript 소스를 그대로 이용하면 아래와 같은 에러메세지가 나고 정상 동작이 안된다.

 

2020-07-31 04:09:17.043 27316-27316/wonpa.alwaysweb.com.ecocall I/chromium: [INFO:CONSOLE(1)] "Uncaught TypeError: Cannot read property 'document' of null", source: http://t1.daumcdn.net/postcode/api/core/200421/1587459050284/200421.js (1)

I/chromium: [INFO:CONSOLE(1)] "A parser-blocking, cross site (i.e. different eTLD+1) script, http://t1.daumcdn.net/postcode/api/core/200421/1587459050284/200421.js, is invoked via document.write. The network request for this script MAY be blocked by the browser in this or a future page load due to poor network connectivity. If blocked in this page load, it will be confirmed in a subsequent console message. See https://www.chromestatus.com/feature/5718547946799104 for more details.", source: http://dmaps.daum.net/map_js_init/postcode.v2.js (1)

 

결국, 실제 native 상에서 실제 웹과 교신하는 소스를 짜는게 완벽한 답이지만 그리 간단하지는 않다.

구글링에서 간단하고, 간편하게 javascript 웹소스상으로 처리하는 포스팅을 발견하고 아래 소스를 바탕으로 해결했다.

 

<input type="text" id="post1" name="post1" size="15" readonly class="fs01" style="width:70px;">&nbsp;<input type="button" onclick="openDaumZipAddress()" value="우편번호 찾기"><br> 
 
<div id="wrap" style="display:none;border:1px solid #DDDDDD;width:99%;margin-top:5px"></div>
 
<input type="text" id="address1" name="address1" placeholder="주소" size="50" readonly class="fs01" style="width:90%; margin-top:5px;"><br>
<input type="text" id="address2" name="address2" placeholder="상세주소" size="50" class="fs01" style="width:90%; margin-top:5px;">
 
 
<script src="http://dmaps.daum.net/map_js_init/postcode.v2.js"></script> 
<script>
function openDaumZipAddress() {
 
    // 우편번호 찾기 화면을 넣을 element를 지정
    var element_wrap = document.getElementById("wrap");
 
    // wrap 레이어가 off된 상태라면 다음 우편번호 레이어를 open 한다.
    if(jQuery("#wrap").css("display") == "none") {
        new daum.Postcode({
            oncomplete:function(data) {
                jQuery("#post1").val(data.zonecode);
                jQuery("#address1").val(data.address);
                jQuery("#address2").focus();
                console.log(data);
            }
 
            // 사용자가 값을 주소를 선택해서 레이어를 닫을 경우
            // 다음 주소록 레이어를 완전히 종료 시킨다.
            , onclose:function(state) {
                if(state === "COMPLETE_CLOSE") {
 
                    // 콜백함수를 실행하여 슬라이드 업 기능이 실행 완료후 작업을 진행한다.
                    offDaumZipAddress(function() {
                        element_wrap.style.display = "none";
                    });
                }
            }
        }).embed(element_wrap);
 
        // 슬라이드 다운 기능을 이용해 레이어 창을 오픈한다.
        jQuery("#wrap").slideDown();
    }
    
    // warp 레이어가 open된 상태라면 다음 우편번호 레이어를 off 상태로 변경한다.
    else {
 
        // 콜백함수를 실행하여 슬라이드 업 기능이 실행 완료후 작업을 진행한다.
        offDaumZipAddress(function() {
            element_wrap.style.display = "none";
            return false;
        });
    }
}
 
function offDaumZipAddress() {
    // 슬라이드 업 기능을 이용해 레이어 창을 닫는다.
    jQuery("#wrap").slideUp();
 
}
</script>

위 소스를 보면 <div id="wrap"> 태그를 보였다 안보였다 하면서, 우편번호 찾기를 처리하고 있다.

 

참고 포스팅 : http://magic.wickedmiso.com/19