[스크랩] 팝업 윈도우 호출시 부모 윈도우에 반환값 전달하기

출처 : http://jsonobject.tistory.com/39

내부 프로젝트에서 코드와 같은 룩업 데이터를 선택하는 화면은 팝업 윈도우로 호출하려는 생각에 팝업 윈도우에서 유저가 선택한 값을 부모 윈도우로 반환하는 방법을 테스트하고 정리하였다.

부모 윈도우에서는 아래와 같이 작성한다.

function openNewWindow(url) {
  var name = '_blank';
  var specs = 'menubar=no,status=no,toolbar=no,width=500,height=200';
  var newWindow = window.open(url, name, specs);
  newWindow.focus();
}

function getReturnValue(returnValue) {
   var div = $('<div />');
  div.append(returnValue);
  div.insertAfter($('#openNewWindowButton'));
}

$('#openNewWindowButton').click(function() {
  openNewWindow('popUpUrl.html');
});

팝업 윈도우에서는 아래와 같이 작성한다.

$('#returnButton').click(function() {
  var returnValue = {
    key1: 'value1',
    key2: 'value2',
    key3: 'value3'
  };
  window.opener.getReturnValue(JSON.stringify(returnValue));
  window.close();
});

• window.opener 오브젝트는 팝업 윈도우를 호출한 부모 윈도우의 window 오브젝트로 부모 윈도우의 JavaScript 메써드를 호출할 수 있다.
• 부모 윈도우에 앞서 정의된 getReturnValue() 메써드를 실행하여 반환한 값을 전달한 후 팝업 윈도우를 닫는다.
• 반환 값 전달시 오브젝트는 부모 윈도우로 정상적으로 전달되지 않는 현상이 있어 JSON.stringify() 메써드를 이용하여 JSON 문자열로 변환하여 전달하였다.
• 부모 윈도우에서는 $.parseJSON() 메써드를 이용하여 다시 오브젝트로 변환하였다.
• window.open() 메써드 사용시 따로 옵션을 주지 않으면 Firefox에선 전체화면으로, Chrome에서는 매우 작은 화면으로 새로운 창이 출력되는 문제가 발생한다. 메서드의 3번째 파라메터에 chrome=1,centerscreen=1을 추가하면 새로운 창이 화면 가운데로 출력되며 innerWidth=1245,innerHeight=885를 추가하면 창의 출력크기를 지정할 수 있다.

-- 실행결과 :
http://plnkr.co/edit/Q2eRNHWBLwpbWeS0IXlA?p=preview

-- 참고자료
http://www.javascript-coder.com/window-popup/javascript-window-open.phtml