Kaoni bizletter

솔루션개발부 전략개발팀 류종현

웹브라우저에서 DHTML과 Javascript로 프로그래밍 할 때 팝업창을 활용합니다.
팝업창에서 원래창의 값이나 함수를 사용하려면 opener. 로 시작하여 사용할 수 있습니다.
반대로 팝업창을 띄워두고 원래창에서 팝업창을 사용할 때가 있습니다.
그런 상황은 많지는 않아서 해결할 수 없는 문제로 남겨두기도 합니다.

이제 원래창에서 팝업창을 제어할 수 있는 코드를 알려드립니다.

팝업창의 참조

원래창에서 <a target=...>또는 open(...)메소드로 팝업창을 띄울 수 있습니다.
팝업창을 띄울때 그것의 참조를 원래창에 속성으로 저장합니다.
팝업창의 참조는 open메소드의 리턴값입니다.

window._childwin = window.open('문서파일', '창이름', '창특성');

이렇게 하고 나면 window._childwin을 통해서 팝업창을 제어할 수 있습니다.

팝업창의 중복열림 방지

팝업창이 떠있을때 원래창에서 팝업창을 다시 띄우면 팝업창의 내용이 갱신됩니다.
이 팝업창의 재로딩을 방지하고 싶다면 원래창에서 팝업창 띄우는 코드를 다시 작성합니다.

function openwin()
{
    if ( window._childwin )        // 새창이 띄워져 있을때
    {
        window._childwin.focus();
    }
    else        // 새창이 띄워져 있지 않을때
    {
        window._childwin = window.open('문서파일', '창이름', '창특성');
    }
}

당연히 처음에는 childwin의 값인 새창의 참조가 저장되어 있지 않으므로 else 이후의 문장을 실행합니다.
창이 띄워진뒤로 childwin은 새창의 참조를 저장하게 되므로 현재창에서 새창을 제어할수 있습니다.

팝업창을 닫을 경우

팝업창을 닫는다면 원래창에 있는 window_.childwin을 null로 해야 합니다.
만약 그렇지 않을때 다시 팝업창을 띄우게 된다면 window._childwin.focus() 에서 팝업창을 찾을 수 없다는 오류를 내게 됩니다.
그래서 팝업창을 닫을 때 실행되는 코드를 정의 해야합니다. 창을 닫을때 onbeforeunload, onunload 순서로 이벤트가 발생합니다.
팝업창에 코딩할 함수입니다.

function closewin()
{
    // opener는 원래창의 참조
    if ( opener != null ) { opener._childwin = null; self.close(); }
}
//...
</script>
</head>
<body onbeforeunload="closewin()" onunload="closewin()">

opener가 null이 아니면 원래창이 있으며, opener._childwin 이 바로 팝업창입니다.
이 값을 null로 하여 팝업창이 닫혔다는 상태를 기억시킵니다.

onbeforeunload와 onload 이벤트는 페이지가 리프레시되거나 다른페이지로 이동할때도 발생하므로
<body onbeforeunload="closewin()"> 또는 <body onunload="closewin()"> 으로 하면 됩니다.

원래창을 닫을 경우

팝업창이 띄워졌을때 원래창을 닫으면 팝업창도 닫히게 하려고 합니다.
이전에 창이 닫힐때 발생하는 이벤트가 onbeforeunload, onunload 순서로 일어난다고 하였습니다.
원래창에 코딩할 함수입니다.

function closewin()
{
    if ( window._childwin )
    { window._childwin.opener = null; window._childwin.close(); }
}

팝업창이 띄워져있다면 팝업창에 있는 opener를 null로 합니다. 그것은 바로 원래창의 참조이기 때문에 닫혔다고 초기화하는 것입니다.
그리고 팝업창을 닫기 위해서 window._childwin.close() 를 호출합니다.

팝업창의 개체에 접근

window._childwin이 팝업창의 참조입니다.
개체의 이름은 id 속성의 값이며 팝업창에 있는 id 속성의 값이 'text1' 이라면
window._childwin.document.getElementById('text1')로 접근할 수 있습니다.
팝업창의 이름은 window._childwin.name 으로 알 수 있고, 팝업창에 정의된 함수의 실행은
window._childwin.함수이름() 으로 할 수 있습니다.

도움되셨는지 모르겠습니다.
ASP.NET에서도 브라우저제어를 위해서는 스크립트가 필요하기 때문에 앞으로도 유용한 스크립트를 소개하겠습니다.

감사합니다.