[Javascript] opener/부모창과 자식창의 데이터 교환/부모창/자식창/예제

부모창에서 자식창을 팝업으로 열었을 때

자식창에서 행해진 Action에 따라 부모창에 영향을 줘야 하는 경우 opener를 사용한다..

 

opener객체는 자기 창을 연 부모의 window 객체를 참조한다.

예제를 적어보자면..

 

1. 부모창에서 popup을 통해 자식창 open

parent.jsp

자식창에서 Action 후 돌아올 function을 하나 만들어 주자 >> completeCallback

$(document).ready(function(){            parent.init(); });   var parent ={  init : function(){   //팝업창 오픈 $('#popupOpenBtn).on('click',function (){ var url='<c:url value="/board/data/child"/>' window.open(url,”test”,”height=100,width=200”); }); } , completeCallback: function(data1,data2){   console.log(data1,data2);   } ..생략

 

 

 

2. 자식창에서 부모창의 Func 호출하기

child.jsp

$(document).ready(function(){            child.init(); });   var child ={  init : function(){                       if(opener) {            try {                opener.parent.completeCallback (‘aaa’,’bbb’);            } catch(e) {               try {                   opener.parent.completeCallback(‘aaa’,’bbb’);                } catch(e) {                   opener.popRefresh();                }             } }   }..

 

>> opener 객체를 통해

부모창의 parent 객체의 지정한 function 명인 completeCallback 함수를 호출하게 되는 내용이다.

다음과 같이 매개변수를 보낼 수도 있다.

console.log를 통해 aaa,bbb 가 찍힐 것이다.