본문 바로가기
스터디/javascript

자바스크립트를 통한 팝업창에서 부모창으로 데이터 주고받기

by 깝태 2015. 3. 2.


최근 들어 자바스크립트와 제이쿼리를 사용을 요구하는 일이 처음부터 제대로 공부를 필요로 할 정도로(약간 짜증날 정도로...ㅎ..) 많아졌습니다. 백엔드에 주력을 함으로 HTML과 CSS에만 집중을 하고 그 외의 언어는 별로 공부를 하지 못 했었는데 Node.js 도 손을 건들어보면서 최근 관심을 가지기 시작했습니다.

그리고 무엇보다 자바스크립트가 언어의 최고봉으로서 자리를 만들어가고 있는 순간 공부하지 않으면 안되겠다 싶어 공부를 시작했습니다. 그리고 부모창과 팝업창 간의 데이터를 주고 받는 놈을 만들다가 자바스크립트를 사용했는데 애먹은 부분이 있었습니다.

일단 제 경우는 팝업창에서 부모창으로 데이터를 전달해줄 때 기본적으로 엘리먼트의 name, id을 중복 사용을 필요로 하는 방식의 PHP 환경이였습니다. (PHP-MySQL-mysql_fetch_array) 그러나 id 값은 중복으로 사용이 불가능하다는 점이 문제이기에 name 방식을 통해 배열값을 주고 받으려다가 모든 name이 값을 가지고 있다는 점 때문에 어떻게 해야할지 의문이였습니다.

더 찾아보다가 그냥 간단하게 인자를 전달해주는 방식으로 꼼수를 사용했습니다.
소스는 다음과 같습니다.

------------------------------------------------
-- test1.html ((부모))
<script>
var winObject = null;

(1)function popupWindow(){
var settings = 'toolbar=0,directories=0,status=no,menubar=0,scrollbars=yes,resizable=no,height=500,width=1000,left=0,top=0';
(1)winObject = window.open("test2.html", "test2", settings);
}

</script>


(2)<input type='text' id='charge' style='width:70px;' value='이름'/>

(1)<input type="button" value="조회" onclick="popupWindow();"/>

------------------------------------------------

-- test2.html ((자식))

<script>

(3)function submitCharge(val1){

(4)window.opener.document.getElementById("charge").value = val1;

(5)self.close();

}

</script>


(PHP 코드 부분은 간단하게 바꿔보았습니다)

$query = ...;

$result = ...;


while($row = mysql_fetch_array($result)){

echo "<input type='text' name='i_charge' value='$row[name]'/>

(6)<input type='button' value='선택' onclick='submitCharge('$row[name]');' />";

}

------------------------------------------------


(1). 부모에서 popupWindow() 함수를 통해 간단하게 팝업창을 열어주고 부모와 자식 관계를 만들어줍니다.

(2). 자식에서 데이터를 부모로 넘겨주면 작성이 되어질 부분을 만들어놓습니다.


(3). submitCharge() 라는 함수를 만들어놓고 인자를 하나 받아옵니다.

(4). 받아오는 인자는 부모에서 'charge' 라는 id 값을 가지고 있는 엘리먼트에 값을 전송합니다.

(5). 과정이 끝나고 자식창을 직접 셀프 종료합니다.

(6). 함수를 호출하며 인자로 해당 값을 보내줍니다.


위의 과정을 통해 자바스크립트를 이용해 배열도 작성이 되어 있는 부분에서 해당 값을 자식에서 부모로 전달해줍니다.

응용을 하면 마찬가지로 부모에서 자식으로 데이터를 전달해주는 부분도 쉽게 개발이 가능합니다.





window.opener.document.getElementById("charge").value 이 부분에서 혹여나 name 에 해당하는 값을 불러오고 싶으시다면

window.opener.document.getElementsByName("charge").value 왼쪽과 같이 사용하시면 됩니다!


이 부분에서 저만 애를 먹은건지, 다른 분들도 애를 먹으셨던건지...더 좋은 방법이 있으면 공유해주시면 감사하겠습니다!


js, jquery 'opener' 관련 함수 - http://wendy81.tistory.com/160

html 'id', 'name' 관련 내용 - http://lucetedaniel.tistory.com/69


열공 :)