window.open 으로 열린 창에 대해 닫혔는지 확인하기

 

 

 

=================================

=================================

=================================

 

 

 

 

 

출처: http://megachoco.egloos.com/5234572



자바스크립트에 대해서도 좀 포스팅을 해볼까.

게시판을 가입하다 보면 아이디 확인이라는 것이 있다.

"해당아이디는 사용가능합니다  [사용하기]" 
라고 새창으로 떠서 꼭 한번 닫게 만든다.

이런절차는 유저가 가입양식을 기껏 작성했는데 아이디가 존재할 경우 가입이 블럭될테고
이럴때 유저가 애써서 작성해놓은 양식이 날아가는 것을 미연에 방지해준다. 애초에 없는 아이디인 것을 확인하고 나머지 양식을 채우게끔 하는 배려라고나 할까.

물론 요즘은 Ajax 라고 하는 Http Request 를 사용해서 굳이 새창을 안띄워도 같은 기능을 하게 만들곤 한다.

하지만 여전히 팝업을 띄워서 정보를 뿌리거나 입력받고, 결과를 가지고 오픈한 페이지(opener)를 조작하는 방법은
많이 쓰이고 있는데, 반대로 opener 에서 팝업창을 조작할 경우는 문제가 하나 생긴다.
해당 팝업창을 유저가 덜컥 닫아버렸을 경우다.
popup 이 opener 를 조작하는 것은 문제가생기지 않는다. popup 을 닫아버렸다면 그냥 opener 를 조작할 popup 자체가 그시간부로 사라지는 것이기 때문에 애초에 이런 문제의 여지가 없다.
문 제는 opener 가 popup에 정보를 전달하는 방법이다. 주로 해당 popup을 오픈하는 서버스크립트 파일에 get,post등으로 전달하는 방법이 보편적이다. 예를들어 opener 에서 검색한 결과를 popup으로 뿌려줄 경우에는
그냥 popup페이지에 get으로 검색 인자를 보내서 처리된 페이지를 출력해주면 그만이다.

허나 문제는 그럴수 없을 경우이다.
예를들자면 팝업으로 mp3플레이어를 열어주고 opener 에서 선택한 곡을 플레이 리스트에 추가하게 한다던지,
팝업으로 장바구니를 띄워놓고 밑에서 고르면 추가되게 한다던지 뭐 여러 이유로 팝업을 리프레싱할수 없는 이유가 있다면,
opener 에서 popup의 포인터를 얻어놓고 조작하려 할 것이다.

opener로써의 test.html 을 만들자

<script type="text/javascript">
var popup;
function popup_it(){
  popup=window.open('test2.html','','top=10,left=10,width=100,height=100');
}
function send_merong(){
  popup.document.getElementById('result').value = "메롱";
}
</script>
<span style="cursor:pointer" onclick="popup_it()">테스트오픈!</span><br>
<span style="cursor:pointer" onclick="send_merong()">메롱!</span>

popup 으로써의 test2.html을 만들자

<input type="text" id="result">

test.html 을 부른후 테스트 오픈! 을 누르면 test2.html이 열릴것이다.
이후 메롱! 을 누르면 popup의 해당 인풋에 메롱이라고 출력되겠지. 이게 예상된 바른 결과이다.
허나 만약 테스트 오픈! 을 누른뒤 창을 닫아버리고 메롱! 을 누르게된다면
스크립트 오류가생기면서 원하는 결과를 내지 못한다.

이럴때는 해당 창이 닫혀거나 아예 열리지 못했을 때의 분기를 만들어 줘야 한다.

<script type="text/javascript">
var popup;
function popup_it(){
  popup=window.open('test2.html','','top=10,left=10,width=100,height=100');
}
function send_merong(){
  if(typeof(popup)=='undefined' || popup.closed) {
   popup=window.open('test2.html','','top=10,left=10,width=100,height=100');
  }
   popup.document.getElementById('result').value = "메롱";
}
</script>
<span style="cursor:pointer" onclick="popup_it()">테스트오픈!</span><br>
<span style="cursor:pointer" onclick="send_merong()">메롱!</span>

이런식으로 해주면 창이 닫혔을때는 다시 열어서 뿌려준다 -_-


popup=window.open('test2.html','','top=10,left=10,width=100,height=100');
이라고 열었을 경우 popup변수가 해당 윈도우와 생사고락을 같이 하는게 아니라는 얘기다.
즉 창이 닫혔다고 popup 변수가 null 이된다거나 하는게 아니라는 점.
popup 변수는 창이 닫혀도 값이 null로 재할당 되지는 않고, 여전히 처음에 열었던 윈도우의 포인터를 가지고 있을것이라는 점이다.
따라서 !popup이라던지 popup==null 이라는 조건은 유저가 창을 닫았을때 의도와 다른 결과를 낳는다.
다행히 closed 라는 변수를 통해서 닫혔는지 아닌지 확인할 수는 있다.

뻘글이 길었는데 중요한 요점은 이것 뿐이다 -_-;

 

 

=================================

=================================

=================================