daum 주소 api 적용하기(2)

<input type="text" id="address" placeholder="주소"><br>
<input type="button" onclick="DaumPostcode()" value="우편번호 찾기"><br>


<!-- iOS에서는 position:fixed 버그가 있음, 적용하는 사이트에 맞게 position:absolute 등을 이용하여 top,left값 조정 필요 -->
<div id="layer" style="display:none;position:fixed;overflow:hidden;z-index:1;-webkit-overflow-scrolling:touch;">
<img src="//t1.daumcdn.net/postcode/resource/images/close.png" id="btnCloseLayer" style="cursor:pointer;position:absolute;right:-3px;top:-3px;z-index:1" onclick="closeDaumPostcode()" alt="닫기 버튼">
</div>

<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script>
    // 우편번호 찾기 화면을 넣을 element
    var element_layer = document.getElementById('layer');
	var device = "";

    function closeDaumPostcode() {
        // iframe을 넣은 element를 안보이게 한다.
        element_layer.style.display = 'none';
    }
	
	function checkDevice(){
	var UA = navigator.userAgent.toLowerCase();
		if(UA.indexOf('android') > -1){
			device = "android";
		}else if(UA.indexOf('iphone') > -1 || UA.indexOf('ipad') > -1 || UA.indexOf('ipod') > -1){
			device = "ios";
		}
	}

    function DaumPostcode() {
        new daum.Postcode({
            oncomplete: function(data) {
                // 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.

                // 각 주소의 노출 규칙에 따라 주소를 조합한다.
                // 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
                var addr = ''; // 주소 변수
               
                //사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져온다.
                if (data.userSelectedType === 'R') { // 사용자가 도로명 주소를 선택했을 경우
                    addr = data.roadAddress;
                } else { // 사용자가 지번 주소를 선택했을 경우(J)
                    addr = data.jibunAddress;
                }

                // 우편번호와 주소 정보를 해당 필드에 넣는다.
                document.getElementById("address").value = addr;

                // iframe을 넣은 element를 안보이게 한다.
                // (autoClose:false 기능을 이용한다면, 아래 코드를 제거해야 화면에서 사라지지 않는다.)
                element_layer.style.display = 'none';
            },
            width : '100%',
            height : '100%',
            maxSuggestItems : 5
        }).embed(element_layer);
		
		// iframe을 넣은 element의 위치를 화면의 가운데로 이동시킨다.
        initLayerPosition();

        // iframe을 넣은 element를 보이게 한다.
        element_layer.style.display = 'block';

      
    }

    // 브라우저의 크기 변경에 따라 레이어를 가운데로 이동시키고자 하실때에는
    // resize이벤트나, orientationchange이벤트를 이용하여 값이 변경될때마다 아래 함수를 실행 시켜 주시거나,
    // 직접 element_layer의 top,left값을 수정해 주시면 됩니다.
    function initLayerPosition(){
			if(device === 'android'){
			element_layer.style.width = "40%";
			element_layer.style.height = "23.5%";
			element_layer.style.border = "5px solid";
			element_layer.style.transform = "scale(2)";
			element_layer.style.left = "30%";
			element_layer.style.top = "30%";
		}else if(device === 'ios'){
        	element_layer.style.overflow = '';
			element_layer.style.width = "40%";
			element_layer.style.height = "30.5%";
			element_layer.style.border = "5px solid";
			element_layer.style.transform = "scale(2)";
			element_layer.style.left = "30%";
			element_layer.style.top = "30%";
		}else{ //pc일 때
			element_layer.style.width = "50%";
			element_layer.style.height = "40%";
			element_layer.style.border = "5px solid";
			element_layer.style.transform = "scale(2)";
			element_layer.style.left = "25%";
			element_layer.style.top = "25%";
		}
     
    }
</script>

 

< div id="layer" 여기에 overflow:hidden을 원래는 주석 처리 했었는데

웹에서 화면을 계속 줄이면 아이프레임 안의 내용이 밖으로 나오게 된다. 그래서 주석해제.

 

 

그리고 처음에 아이폰에서는 x가 보이지 않는다고 생각해서

그러면 내가 x버튼을 만들어서 처리해야겠다 싶어서

 

var bt_close = document.createElement('img');
bt_close.src = '/resource/img/button.png'
bt_close.style.width = 50+"px";
bt_close.style.height = 50+"px";
bt_close.style.position = "absolute";
bt_close.style.display = "block";
bt_close.style.margin = 0;
bt_close.style.right = 0+"px";
//bt_close.style.border = 0+"px";
bt_close.style.border = "none";
bt_close.style.zIndex = "999";
bt_close.style.top = -50+"px";
bt_close.setAttribute("onclick","closeDaumPostcode()");

 

element_layer.prepend(bt_close);

 

이런 걸 추가했었는데..

 

아이폰에서 x버튼이 사라지는게 아니고

돋보기 뒤로 숨는다는 걸 알게되었고.. 흠.. 

< div id="layer" 여기에 /*overflow:hidden*/ 오버플로우 히든을 쓰지 않으면 보인다는 것도 알게 되어서

아이폰일 경우에는 

element_layer.style.overflow=''; 이렇게 해서 hidden을 뺐다.

일단은 잘 작동하는 것으로 보인다.

 

 

---

[ 추가 ]

위의 코드로 적용했을 때

주소찾기 api의 아이프레임 창이 뜬 후

아이폰에서 selet박스를 누르면 창이 커졌다. (zoom)

 

찾아보니 커지는 이유는 텍스트 크기가 16px이하이면

아이폰 자체에서 창을 줌시킨다고 한다.

 

 

그래서 방법으로는 (검색어 : ios select 확대) 

1) 텍스트 사이즈를 변경하거나

2) 메타태그를 쓰거나

3) touch-action을 적용하거나 (CSS touch-action  : https://wit.nts-corp.com/2021/07/16/6397)

등의 방법이 있었고

 

나의 경우 텍스트 사이즈 변경, 터치액션은 작동하지 않았다..

그래서 메타태그를 선택했고

<meta name="viewport" content="user-scalable=no"/> 이렇게만 해도 문제가 없는 페이지가 있고

기존의 css와 충돌을 하는 건지.. 위의 코드만으로는 해결이 안되서

<meta name="viewport" content="device-width,initial-scale=0.39,minimum-scale=0.39, maximum-scale=1.0,user-scalable=no"/>  이렇게 적어야 하는 경우도 있었다.

또 이 경우에는..화면이 틀어져서 처음부터 코드에 박아둘 수는 없어서..

ios에서 주소찾기 api를 사용할 때만 추가하는 방향으로 수정했다.

var meta = document.createElement('meta');
meta.name = "viewport";
meta.content = "width=device-width,initial-scale=0.39,minimum-scale=0.39, maximum-scale=1.0,user-scalable=no";

function checkDevice(){
	var UA = navigator.userAgent.toLowerCase();
	if(UA.indexOf('android') > -1){
		device = "android";	
	}else if(UA.indexOf('iphone') > -1 || UA.indexOf('ipad') > -1 || UA.indexOf('ipod') > -1 ){
		device = "ios";	
		document.getElementsByTagName('head')[0].appendChild(meta);
	}
}