주간 업무 - 2023.06w
iframe 이슈 해결
iframe 이슈의 시작
특정 조건에서 인앱결제 웹뷰 페이지 진입 시,
해당 페이지의 스크롤 위치를 특정 섹션의 위치로 바꿔야 하는 작업이 있었다.
현재 개발한 앱의 인앱결제 페이지 구조는
1. vue.js로 만들어진 부모 페이지 진입 시(속칭 껍데기)
2. php로 개발된 자식 페이지를 iframe으로 호출한다
이다.
때문에 구현하려던 방법은
1. vue.js에서 iframe 로드 시 특정 파라미터를 보낸다
2. 특정 파라미터 확인 후 해당 값이 존재하면 페이지 로드 시 스크롤을 움직이는 함수를 실행한다
3. 스크롤을 움직이는 함수 : 특정 섹션의 offset().top을 구한 후 animate 함수를 이용하여 스크롤 위치를 움직이게한다
였다.
하지만...
문제 (난이도 하)
부모 페이지에서 iframe 내 함수 접근 방법을 찾아봐야한다 ^_T
검색을 하다보니 postMessage를 이용한 방법을 찾아냈고 적용시켰다.
부모 : 부를게
자식 : 받을게이런 원리로 iframe 내 moveScroll() 함수를 실행시켰다 (https://developer.mozilla.org/ko/docs/Web/API/Window/postMessage#the_dispatched_event)
문제 (난이도 상)
진짜 문제는 직접 만든 스크롤 이동 함수인데
moveScroll()iframe 로드 타이밍이 조금만 어긋나도 특정 섹션의 offset().top을 구하지 못했다
때문에 하나씩 거슬러 올라가보며 체크를 해봤다
구간마다 log찍는 버릇페이지 로드가 되어 정상적으로 특정 섹션의 이미지 표출도 됐고
vue.js 디렉티브를 컨트롤하는 함수들이나 postMessage 관련 함수들 역시 정상적으로 실행되었지만
여전히 특정섹션의 위치를 구하지 못했다
많은 생각 끝에 setTimeout()을 통해 특정 섹션의 위치를 구하는 타이밍을 지연시키려했다.
하지만 setTimeout()의 밀리세컨드(= 로드 시간)를 하드코딩으로 정할 순 없다고 생각해
옳은 방법이 아니라 생각이 들어 과장님께 여쭤보고 명쾌한 해답를 받았다.
setInterval로 특정 섹션의 위치가 구해졌는지 체크해보라는 것(과장님은 천재이신걸까?)
어엇.... moveScroll()이 진화했다!그럴정도로 쓰진 않겠지만, 혹시라도 setInterval()로 과도하게 리소스를 잡아먹지 않도록
특정 섹션의 위치를 구하지 못하더라도 clearInterval()를 시켜주도록 했고 결과는,
setInterval()을 10ms(0.01초)로 설정했지만
추가적으로 더 테스트해봐도 setInterval() 실행횟수가 최대 3회를 넘기지 않은걸보아
리소스 관련 이슈도 없을거라 판단했다.
후기
iframe 내 함수 호출 방법은 두고두고 잘 써먹을 것 같다.
단순히 값만 구하기 위해 setTimeout()으로 지연시켜 구할 수 있지만
불확실하고 정확하지 않은 값으로 페이지 로드 시간을 구한다는게 어딘가 계속 마음이 불편했다.
그 불편한 마음으로 시작된, 어떻게하면 더 확실한 값을 구하고 마음이 편해질수 있을까라는 생각이
로드 후 특정 섹션의 위치를 반복적으로 찾아 구해낸 확실한 답으로 이끌었다.(과장님의 도움이 있었지만)
앞으로도 이슈 해결은 계속 이렇게 keep going
