[JavaScript] 부모창과 자식창의 값 전달

window.open()을 이용하면 팝업창을 띄울 수 있다. 이때 팝업창은 자식창, 팝업을 띄우는 창은 부모창이 된다. 자식창과 부모창간에는 서로 값을 주고받을 수 있다.

부모창에서 자식창에 접근하려면 팝업창을 특정 변수에 담아서 그 변수를 통해 접근하면 된다. 반대로 자식창에서 부모창에 접근하려면 opener를 이용해서 접근을 하면 된다.

부모창에서 자식창으로 값 전달하기

■ Parent.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
    <title>Parent</title>
    
    <script type="text/javascript">
    
        var openWin;
    
        function openChild()
        {
            // window.name = "부모창 이름"; 
            window.name = "parentForm";
            // window.open("open할 window", "자식창 이름", "팝업창 옵션");
            openWin = window.open("Child.html",
                    "childForm", "width=570, height=350, resizable = no, scrollbars = no");    
        }
        
        function setChildText(){
            openWin.document.getElementById("cInput").value = document.getElementById("pInput").value;
        }
 
   </script>
    
</head>
<body>
 
    <br>
    <b><font size="5" color="gray">부모창</font></b>
    <br><br>
    <input type="button" value="자식창 열기" onclick="openChild()"><br>
    전달할 값 : <input type="text" id="pInput"> <input type="button" value="전달" onclick="setChildText()">
</body>
</html>
Colored by Color Scripter
cs

자식창 열기를 클릭하면 openChild( ) 함수가 실행되며 자식창이 열린다. 그리고 전달을 클릭하면 setChildText( )가 실행되며 자식창으로 값이 전달된다.

16줄 : open된 자식창을 openWin이라는 변수에 담는다.
21줄 : 자식창에 접근하기 위해 openWin(자식창)을 사용한다. openWin.document.getElementById("cInput").value 이런 식으로 openWin부터 시작하여 자식창에 있는 특정 element에 접근할 수 있다.

■ Child.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
    <title>Child</title>
 
</head>
<body>
    <br>
    <b><font size="5" color="gray">자식창</font></b>
    <br><br>
 
    <input type="text" id="cInput"><br><br>
    <input type="button" value="창닫기" onclick="window.close()">
</body>
</html>
Colored by Color Scripter
cs

■ 실행결과

먼저 부모창에서 자식창열기 버튼을 클릭한다.

자식창이 열리면 부모창에서 전달할 값을 입력 후 전달 버튼을 클릭한다. 그러면 입력한 값이 자식창으로 전달된다.

자식창에서 부모창의 값 가져오기

이번에는 자식창에서 부모창에 입력된 값을 가져와보자.

■ Parent.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
    <title>Parent</title>
    
    <script type="text/javascript">
    
        function openChild()
        {
            // window.name = "부모창 이름"; 
            window.name = "parentForm";
            // window.open("open할 window", "자식창 이름", "팝업창 옵션");
            window.open("Child.html",
                    "childForm", "width=570, height=350, resizable = no, scrollbars = no");    
        }
 
   </script>
    
</head>
<body>
 
    <br>
    <b><font size="5" color="gray">부모창</font></b>
    <br><br>
    <input type="button" value="자식창 열기" onclick="openChild()"><br>
    전달할 값 : <input type="text" id="pInput">
</body>
</html>
Colored by Color Scripter
cs

■ Child.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
    <title>Child</title>
 
    <script type="text/javascript">
        function getParentText(){
            document.getElementById("cInput").value = opener.document.getElementById("pInput").value;
        }
   </script>
 
</head>
<body>
    <br>
    <b><font size="5" color="gray">자식창</font></b>
    <br><br>
 
    <input type="text" id="cInput"> <input type="button" value="가져오기" onclick="getParentText()">
    <br><br>
    <input type="button" value="창닫기" onclick="window.close()">
</body>
</html>
Colored by Color Scripter
cs

자식창에서 부모창에 접근하기 위해서는 opener를 사용해야 한다. 9줄 처럼 opener를 이용하면 부모창에 있는 특정 element에 접근하여 값을 가져올 수 있다.

자식창에서 부모창으로 값 전달하기

■ Parent.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
    <title>Parent</title>
    
    <script type="text/javascript">
    
        var openWin;
    
        function openChild()
        {
            // window.name = "부모창 이름"; 
            window.name = "parentForm";
            // window.open("open할 window", "자식창 이름", "팝업창 옵션");
            openWin = window.open("Child.html",
                    "childForm", "width=570, height=350, resizable = no, scrollbars = no");    
        }
 
   </script>
    
</head>
<body>
 
    <br>
    <b><font size="5" color="gray">부모창</font></b>
    <br><br>
    <input type="button" value="자식창 열기" onclick="openChild()"><br>
    전달할 값 : <input type="text" id="pInput">
</body>
</html>
Colored by Color Scripter
cs

■ Child.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
    <title>Child</title>
 
    <script type="text/javascript">
        function setParentText(){
             opener.document.getElementById("pInput").value = document.getElementById("cInput").value
        }
   </script>
 
</head>
<body>
    <br>
    <b><font size="5" color="gray">자식창</font></b>
    <br><br>
 
    <input type="text" id="cInput"> <input type="button" value="전달하기" onclick="setParentText()">
    <br><br>
    <input type="button" value="창닫기" onclick="window.close()">
</body>
</html>
Colored by Color Scripter
cs