[Javascript] 부모창에서 자식창 열기, 자식창에서 부모창으로 값 전달 / opener 부모,자식창 데이터 교환

■ Javascript 부모창에서 자식창 열기, 자식창에서 부모창으로 값 전달 /  opener 부모,자식창  데이터 교환

---

부모창에서 팝업으로 자식창을 열었을 때
자식창에서 행해진 Action 에 따라 부모창에 영향을 줘야 하는 경우 Opener를 사용함

Opener 라는 객체는 자신의 부모창의 Window 객체를 참조함

### 예제 ###

1. 부모창에서 팝업으로 자식창을 오픈
( 자식창에서 Action 후 돌아오면 completeCallback이라는 function이 실행됨 )

$(document).ready(function(){ 
  parent.init(); 
}); 

var parent = { 
  init:function(){ 
    // 팝업창 오픈 
    $("#OpenBtn").on('click', function(){
      var url = "./popupChild.php";
      window.open(url, "test", "height=100, width=200");
    });
  }
},

completeCallback:function( data1, data2 ){
  // 자식창에서 행해진 Action 후 실행
  console.log(data1, data2);
}

2. 자식창에서 부모창의 Function 호출

$(document).ready(function(){ 
  child.init(); 
}); 

var child = { 
  init:function(){ 
    if( opener ){
      try{
        opener.parent.completeCallback( 'aaa', 'bbb' );
        self.close();
     }catch(e){
       try{
              opener.parent.completeCallback( 'aaa', 'bbb' );
              self.close();
        }catch(e){
              opener.popRefresh();
        }
      }
    }
  }
}

### 결과 ###

부모창 내 parent 객체의 지정한 completeCallback 함수를 호출하게 됨
따라서 completeCallback 에 console.log가 실행되어 aaa, bbb 가 console 에 찍히게 됨

 

 

출처: https://mkil.tistory.com/226