모바일 아이프레임 이슈

이번 프로젝트 하면서 완전 질색한게 있으니 그건 바로 모바일 아이프레임

안드로이드만 해도 그나마 괜찮다. 크나큰거 아닌 이상 잘 불러와주니까..

근데 복병은(아니, 어쩌면 항상) 바로 아이폰 ㅠ_ㅠ

이번에 겪으면서 느낀 아이프레임 이슈에 대해 다뤄보려고 한다.

1. 모바일 리사이즈 오류 (아이폰)

2. 모달창 높이 맞추기 (PC, 모바일 공통)

3. 모달창이 뜨지 않는 현상 (아이폰)

우리가 쓰고 있는 모달창(B-POPUP과 유사)은 현재 보고있는 해상도 창(window.height()) 값을 받아 가운데에 띄우게 해주는데,

아이프레임에 들어가있을 경우 window값을 해당 문서의 윈도우 값이 아닌 링크 도메인의 윈도우 값으로 받아, 전체 문서 높이를 받게 된다.

4. 스크롤 이벤트가 되지 않는 현상 (아이폰)

1) 도메인이 같을 경우

window.parent 를 사용해서 해당 문서 상단에 있는 아이프레임 객체를 건드릴 수 있다.

부모격인 아이프레임의 스크롤은 overflow:hidden 으로 없애고, 자식요소인 문서 스크롤로 스크롤 사용을 한다.

2) 도메인이 다를 경우

우선 도메인만 같아도 위와 같이 좀 더 쉽게 아이프레임을 건드릴 수 있지만,

최악은 도메인이 다른경우다....  도메인이 다르면 아이프레임 객체를 잡지 못해 에러가 떠버린다.

이럴때 <main class="wrap"></main> 같이 전체를 감싼 섹션 밖에 iscroll을 사용하여 감싸준다.

다만, 이 아이스크롤을 document.ready로 넣어버리면 위에 있는 리사이즈 작동중 스크롤실행이 되면서,

제대로 높이를 받지 못해 오류가 날 수 있다.

반드시 window.load 로 페이지 로드가 다 끝나고 아이스크롤을 작동시켜주자.

(인터넷이 느린 환경이면 시간소요가 꽤 걸리는 동안 스크롤을 할수 없다는 단점이 있다. 그래도 아예 안되는 것보단 낫지..)