반응형

서버에서 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()를 사용해본 적이 없는데, 지금까지 잘못 사용하고 있었다는 거...ㅠㅠ(동작엔 문제없었으니 잘못은 아닐지도…?)

반응형

+ Recent posts