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

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

부모 윈도우에서는 아래와 같이 작성한다.
function openNewWindow(url) {
  var name = '_blank';
  var specs = 'menubar=no,status=no,toolbar=no';
  var newWindow = window.open(url, name, specs);
  newWindow.focus();
}

function getReturnValue(returnValue) {
  alert(returnValue);
}

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

팝업 윈도우에서는 아래와 같이 작성한다.
$('#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를 추가하면 창의 출력크기를 지정할 수 있다.

-- 실행결과
{"key1":"value1","key2":"value2","key3":"value3"}

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