아이프레임으로 페이지에 끼워넣기 시 스크롤 문제

cheonmux commented 2 years ago

안녕하세요.

우선, 다음 우편번호 검색을 정말 유용히 사용하고 있습니다. 감사합니다.

아이프레임으로 페이지에 끼워넣기 방식으로 다음 주소 검색창을 변경하려 합니다.

코드는 예제와 거의 동일하며, 다음의 코드를 사용했습니다.

// wrap 엘리먼트 코드

<script>
    const parent = document.querySelector('#billing_postcode_find_field');
    const billingField1 = document.querySelector('#woocommerce-input-wrapper');

    const newDiv = document.createElement('div');
    newDiv.setAttribute('id', 'wrap');
   newDiv.style.cssText = 'display:none;border:1px solid #dddddd;width:100%;height:300px;margin:5px 0;position:relative';

       parent.insertBefore(newDiv, billingField1);
</script>

// 다음 주소 검색창 코드

<script>
    var element_wrap = document.getElementById('wrap');
    function foldDaumPostcode() {
        element_wrap.style.display = 'none';
    }
    function openDaumPostcode() {

        new daum.Postcode({
            oncomplete: function(data) {

                document.getElementById('billing_postcode').value = data.zonecode;
                document.getElementById('billing_address_1').value = data.address;

                element_wrap.style.display = 'none';
                // 우편번호 찾기 화면이 보이기 이전으로 scroll 위치를 되돌린다.
                document.getElementById('billing_address_2').focus();
                if (matchMedia("screen and (min-width: 1024px)").matches) {
                document.getElementById('billing_email').scrollIntoView({behavior: 'smooth'});
                } else {
                  // 1024px 미만에서 사용할 JavaScript
                  document.getElementById('billing_address_2').scrollIntoView({behavior: 'smooth'});
                }

            },

            onresize : function(size) {
                element_wrap.style.height = size.height+'px';
            },
            width : '100%',
            height : '100%',
           useBannerLink : false,

        }).embed(element_wrap);
        // iframe을 넣은 element를 보이게 한다.
        element_wrap.style.display = 'block';
    }
</script>

작동은 잘 됩니다만.. 주소를 검색 후 모바일에서 주소를 선택하고자 위로 스크롤을 하면

페이지가 움직이는게 아니라 아이프레임 내에서 스크롤이 되어 버립니다.

그런데 그 스크롤이 움직이지가 않습니다... ;; GIF 링크

그래서 아이프레임이 들어가있지 않은 모바일의 끝 부분을 스크롤 해야 겨우 내려가집니다..

혹시 이 문제를 어떻게 해야 해결할 수 있는지 알려주실 수 있으신가요?

예제처럼 내려가게 하고 싶은데 그게 안되네요 ;;

감사합니다.

daumPostcode commented 2 years ago

@cheonmux

안녕하세요~ 이는 내부 iframe을 감싸고 있는 div가 내부 iframe의 길이보다 짧아서 그런것 같긴 합니다. 한번 개발자도구로, 사이즈를 재보시는게 어떠실까 합니다.

wrapper의 사이즈가 우편번호서비스 검색결과리스트 화면보다 작으면 자동으로 내부 스크롤이 생성되기에 그렇습니다. 이때 스크롤을 막으실려면,

wrapper의 크기를 검색결과리스트의 화면과 사이즈가 동일하게 맞추시거나 wrapper에 overflow:hidden을 부여해 보시기 바랍니다. 사이즈를 정확히 맞추기 어려울땐 살짝 값이 틀어지는 경우라면 그냥 hidden처리해서 맨 아래가 살짝 잘리더라도 스크롤이 안생기게 하는게 좋거든요.

개발자 도구를 이용해서 확인을 해보시는걸 추천드립니다.

cheonmux commented 2 years ago

@daumPostcode 님 안녕하세요.

답변 감사합니다! 단순하게 element_wrap.style.height = size.height+'px';에 1px 만 추가해서 해결했습니다!

이제 거의 모든 기능이 잘 작동합니다만... 이상하게 아이폰에서 주소 선택 후에 포커싱이 안됩니다 ;;;

더 이상한건 그냥 다른 창으로 전환 후 다시 사파리로 들어가면 포커싱이 제대로 되어 있습니다..

데스크탑에서 테스트 했을때는 잘 작동합니다만... 기존에 사용하던 "팝업을 이용하여 도로명 주소와 지번 주소 모두 보여주기 " 방식에는 잘 되었습니다..

혹시 이 부분에 대해 제가 확인해봐야 될 것이 있는지 조언을 구하고 싶습니다. 감사합니다!

daumPostcode commented 2 years ago

@cheonmux 음. 주소를 선택한 후에, 우편번호 서비스화면이 사라지고, wrapper도 사라지면서 화면을 reflow하게 됩니다. 이때 브라우저 내부적으로 렌더트리가 업데이트되고, 다시 화면을 조정하면서 재배치 되는데; focus이벤트의 경우 이러한 상황에서 제대로 동작하지 않은 경우가 많습니다. 사파리 브라우저의 내부적인 동작특성을 저도정확히 이해하고 있는 것은 아닌지라, focus이벤트는 이러한 dom-tree의 내부적인 변환시에 제대로 동작하는 경우가 많지 않아 잘 쓰진 않아요. 대략 이럴때에는 reflow다 다 끝나는 시점이 정확히 언제인지는 알수는 없으나, 대략 focus이벤트를 setTimeout이나 이런 콜백함수를 이용해서 몇미리세컨드 뒤에 수행하게 하면 동작하는 경우도 있습니다. 한번 참고해 보세요.

추가로, 아이폰에서는 사용자의 입력이 없는 상태에서의 javascript만의 input태그 명령을 무시하는 것도 있으니 이부분 참고 부탁드립니다. 현재 우편번호 서비스의 검색화면에서, iOS에서만 input검색어 입력박스에 포커스가 가지않고 말풍선이 뜨는걸 확인하실 수 있으실 거에요. 이게 바로 이 이유때문에 그렇게 한 것이라 보시면 되십니다. 이외 다른 브라우저에서는 문제 없구요. ㅎㅎ

daumPostcode / QnA

아이프레임으로 페이지에 끼워넣기 시 스크롤 문제 #913