20230210 JS- Parent-Child

Myung A Lee·2023년 2월 10일

Code Review

목록 보기

2/5

<html>
    <head>
        <meta charset="UTF-9">
        <title>BOM PARENT</title>
    </head>
    <body>
        <!-- 자식창을 열고 닫기 위한 버튼 -->
        <button>창열기</button>
        <button>창닫기</button>
        <br/>

        <!-- 자식창으로 보낼 데이터를 입력하는 input요소와 
        클릭할 때 입력한 내용을 전송할 수 있는 기능을 가진 버튼을 생성 -->
        자식창으로 보낼 데이터 :
        <input type="text" id="toChild"/>
        <input type="button" value="보내기" onclick="sendVal()"/>
        <br/>

        
        자식창에서 보낸 데이터 :
        <input type="text" id="fromChild"/>
        
    </body>
    <script>

        
        var win; //창을 다루기 위해서 만든 변수

        // 태그 이름을 button으로 갖는 요소들을 배열로 가져옴
        var btn = document.getElementsByTagName('button');

        //가져온 요소들이 배열로 저장 되므로 확인 할때는 각각의 인덱스 값을 넣어 확인
        // console.log(btn[0]);
        // console.log(btn[1]);

        //가져온 요소들이 배열로 저장 되므로 확인 할때는 각각의 인덱스 값을 넣어야함
        // 첫번째 버튼에는 addEventListener을 통해 클릭 했을 때 익명함수가 실행되도록 함
        // 익명함수는 여기에서만 사용할 것이라는 의미

        btn[0].addEventListener('click',function(){
            win = window.open('./09_child.html','','width=430,height=200');
        })  //'./09_child.html'이라는 url을 가진 창을 'width=430,height=200'의 옵션으로 열겠다.
            // 창을 다루기 위해서는 변수에 담아야하므로 
        btn[1].addEventListener('click',function(){
            win.close();
        }) //열린 창을 닫겠다

        function sendVal(){
            //console.log('자식으로 데이터 보내기');
            var val = document.getElementById('toChild').value;
            win.document.getElementById('fromParent').value = val;
            //fromParent는 이 document내에 있지 않으므로 
            console.log(val);
        }

        function plus(a,b){
            console.log('부모 함수 plus 실행 : ',a+b);
        }
    </script>
</html>

<html>
    <head>
        <meta charset="UTF-9">
        <title>BOM CHILD</title>
    </head>
    <body>
        <h3>자식창</h3>
        부모로부터 받아온 값: 
        <input type="text" id="fromParent"/>
        <br/>
        부모창으로 보낼 값 :
        <input type="text" id="toParent"/>
        <input type="button" value="보내기" onclick="sendVal()"/>
    </body>
    <script>

        function sendVal(){
            console.log('부모에게 데이터 보내기');
            var val = document.getElementById('toParent').value;
            //자식창에서 opener은 부모창을 의미
            opener.document.getElementById('fromChild').value = val;
            opener.plus(10,20);
        }
    </script>
</html>

Myung A Lee

이전 포스트

230209 JS_글자색상변경

다음 포스트

20230210 JS- Parent-Child

Code Review

230209 JS_글자색상변경

230307 JAVA_MVC_TodoList

0개의 댓글