티스토리 뷰

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

부모 윈도우에서는 아래와 같이 작성한다.
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


댓글
댓글쓰기 폼