서버에서 html 코드를 받아서 팝업으로 띄워야 할 일이 생겼다. axios로 값을 받아서 window.open()으로 팝업을 띄운 뒤 document.write()로 html 코드를 집어넣었는데 페이지가 제대로 동작하지 않았다. 원인을 찾아보니 서버에서 받은 html 코드가 제이쿼리를 사용하고 있는데 $(window).load() 부분이 실행되지 않았다.
해당 html 코드를 직접 html 파일로 만들어서 열어보면 정상 작동한다. window.open()으로 연 창에서만 작동하지 않는 것이다. 해결하려고 $(window).load()를 $(document).ready()로 교체, 제이쿼리 대신 window.onload 사용 등의 시도를 해봤는데 모두 소용이 없었다. 그러다 혹시나 해서 팝업창에서 개발자 도구를 열어 document.readyState 값을 확인해봤는데 'loading'으로 나왔다. 로딩이 끝났으면 'complete'이어야 하는데 계속 로딩 상태였다. 아무래도 이 부분이 원인인 거 같아 이쪽을 키워드로 검색해보니 해결법은 간단했다.
document.close();위 코드를 사용하면 된다. window.open()으로 연 창은 document.close()로 완료하기 전까지 계속 로딩 상태라고 한다. 아래 코드를 확인해볼 수 있다.
const popup = window.open();
popup.document.write('<html><head></head><body><p>테스트</p></body></html>');
console.log(popup.document.readyState); // 'loading'
popup.document.close();
console.log(popup.document.readyState); // 'complete'알고 보니 아주 간단한 문제고 상식이라면 상식이라 할 수 있는 부분인데 지금까지 몰랐었다. 그동안 window.open()을 사용하면서 한 번도 document.close()를 사용해본 적이 없는데, 지금까지 잘못 사용하고 있었다는 거...ㅠㅠ(동작엔 문제없었으니 잘못은 아닐지도…?)
'프로그래밍 > 웹' 카테고리의 다른 글
| [자작] 네이버 카페 패스 (다음 카페 지원) (4) | 2024.02.17 |
|---|---|
| [JavaScript] DOMContentLoaded 이벤트가 작동하지 않을 때 (0) | 2023.06.18 |
| [JavaScript] query string를 object로 변환하기 (0) | 2023.04.23 |
| [JavaScript] Debounce, Throttle 함수 (0) | 2023.03.18 |
| Tailwind CSS 클래스 모음집 사이트 (0) | 2022.07.31 |
| [CSS] 간단한 중앙 정렬 (0) | 2022.07.09 |
| [Node.js] 로컬 패키지 사용하기(+alias) (0) | 2022.06.13 |
| [Node.js] yarn upgrade를 해도 package.json가 그대로 일 때 (0) | 2022.03.19 |