부모창에서 자식창의 로드가 완료된 후 함수 호출하기

발생일: 2009.07.21

문제:
부모창에서 자식창의 내용이 모두 로드된 후에 함수를 호출하려고 한다.
팝업의 내용이 모두 완료된 후에 부모창에서 자식창의 제어를 하고 싶다.

예)
공지사항 팝업 컨트롤러에서 팝업이 모두 뜨고 난 후에 팝업창의 사이즈를 조절하고 싶은 경우.
또는 팝업이 모두 완료된 이후에 특정 문구나 스타일을 추가하고 싶을 경우.


해결책:
일반적으로는 팝업이 표시되는 페이지에서 onload 이벤트를 구현해주면 되겠지만,
여기서는 부모창에서 자식창의 status를 확인한다.

아래와 같이 부모창에서 팝업을 띄울 때 팝업창 객체를 변수에 담아두고,
그 객체의 onload 이벤트 핸들러를 정의해주면 된다.

var pop = window.open('팝업창의 주소');
setEventHandler(pop, 'load', function() {
    // 여기에 할 일을 구현.
    // 이 안에서 pop 변수를 써도 팝업창 객체에 접근이 가능하다. (closure)
    // setEventHandler 함수는 이벤트 핸들러를 등록하기 위한 함수라고 가정한다.
});

결국 '팝업창 객체에 이벤트 핸들러를 등록' 해주면 된다.

간단하지만 위 방법이 의외로 요긴할 수 있다.
위에 적은 예처럼 부모창에서 팝업창의 상태를 확인해 사이즈를 변경한다거나 하는 추가적인 액션을 취할 수 있으며,
또는 공통 팝업 모듈에 위처럼 팝업창에 대한 이벤트 핸들러를 등록해 각 페이지에 코드 추가 없이 제어할 수 있다.