다음 우편번호 API를 사용하는데 iframe마다 min-width: 300px 이 걸려있어 모바일에서 잘림현상이 발생하는데 iframe 안의 html과 css라서 수정이 안되었다.
<div id="zipcodeWrap">
<!--얘는 수정가능-->
<iframe>
#document
<html>
<body>
<!--얘는 수정 불가-->
<iframe id="daum_zipcode_view">
</body>
</html>
</iframe>
</div>
해결
(소스는 구리지만..) contentWindow로 내부에 접근하여 거기서 다시 document.getElementById로 접근하여 css를 수정하였다. 테스트 하다보니 가끔 못찾는 경우가 있어 setTimeout을 걸어 처리하였다.
const zipCodeIframe = document.getElementById("zipcodeWrap").childNodes[0].contentWindow.document.getElementById("daum_zipcode_view");
if (zipCodeIframe) zipCodeIframe.style.minWidth = "auto";
반응형
'Issues > Javascript&jQuery' 카테고리의 다른 글
| [javascript & Mobile] 주소창 포함한 100vh 구하기 (jquery / javascript height 총 정리) (0) | 2021.12.07 |
|---|---|
| [javascript & 정규식] 특정문자열 제외하고 다 치환하기 (0) | 2021.12.07 |
| [javascript & Swiper] 슬라이드 가운데 오기 & loop 아닐때 (0) | 2021.12.07 |
| [javascript & HTML5] video tag autoplay + muted 음소거 해제하기 (html video태그) (0) | 2021.12.03 |
| [javascript & html] input file 첨부파일 n개 이상이면 자르기 (DataTransfer) (0) | 2021.12.03 |
