부모창과 자식창 간의 데이터를 전송할 수 있는 코드
<html>
<head>
<meta charset="UTF-8">
<title>자식창</title>
<link rel="icon" href="../img/chrome.png">
</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>더보기
우선 부모창에서 자식창을 열어줄 수 있도록 자식창을 만들었습니다.
자식창에는 부모창에서 받아온 값을 넣어주는 텍스트박스와
부모창에 값을 입력해 보낼 수 있는 텍스트박스와 버튼을 만들어주었습니다.
버튼에는 onclick했을 때 이벤트가 발생할 수 있도록 sendVal함수를 넣어주었습니다.
sendVal함수에 부모창으로 보낼 값을 담을 수 있는 val변수를 선언해주고
opener로 부모창에 있는 fromChild를 아이디로 가진 텍스트 박스에 val변수의 값이 담길 수 있도록 해주었습니다.
그리고 부모창에 있는 plus함수로 10과 20을 연산할 수 있도록 함께 보내주었습니다.
<html>
<head>
<meta charset="UTF-8">
<title>부모창</title>
<link rel="icon" href="../img/chrome.png">
</head>
<body>
<button>창열기</button>
<button>창닫기</button>
<br/>
자식창으로 보낼 데이터 : <input type="text" id="toChild"/>
<input type="button" value="보내기" onclick="sendVal()"/>
<br/>
자식창에서 보낸 데이터 : <input type="text" id="fromChild"/>
</body>
<script>
var win;
var btn = document.getElementsByTagName('button');
//console.log(btn);
btn[0].addEventListener('click',function(){
win = window.open('./09_child.html','child','width=420,height=130');
})
btn[1].addEventListener('click',function(){
win.close();
})
function sendVal(){
//console.log('자식으로 데이터 보내기');
var val = document.getElementById('toChild').value;
win.document.getElementById('fromParent').value = val;
//console.log(val);
}
function plus(a,b){
console.log('부모함수 plus 실행 : ',a+b);
}
</script>
</html>부모창에는 자식창을 열고 닫을 수 있는 버튼을 각 1개씩 만들어주었습니다.
자식창으로 보낼 데이터를 입력해서 전송할 수 있도록 텍스트박스와 버튼을 만들어주고
자식창에서 보낸 데이터를 담을 수 있는 텍스트박스를 만들어주었습니다.
우선 새창으로 자식창을 불러올 수 있도록 win 변수와
버튼 태그를 불러오도록 btn변수로 선언해주었습니다.
버튼태그 2개를 불러왔기 때문에 첫번째 버튼태그인 창열기 버튼을 선택하기 위해 btn의 0번 인덱스로 지정한 후 이벤트리스너로 클릭했을 경우 익명함수를 실행하도록 해주었습니다.
이 익명함수는 window 속성으로 인해 새창으로 지정크기한 크기의 자식창을 불러옵니다.
btn의 1번 인덱스로 창닫기 태그를 지정해 버튼을 클릭할 경우 자식창이 닫히도록 해주었습니다.
자식창으로 입력값을 보낼 수 있는 sendVal함수를 만들었습니다.
id가 toChild인 input태그의 값을 val변수에 저장한 후 서버로 자식창의 fromParent의 값으로 보낼 수 있도록 해주었습니다.
마지막으로 plus연산을 해줄 수 있는 plus함수를 만들었습니다.
plus함수는 자식창에서 데이터를 보낼 때 마다 plus함수 안에 넣어 온 값을 콘솔에서 +연산하여 보내여줍니다.
* 실행하기 위해서는 Live 서버를 이용하여 서버간 데이터 전송이 가능하도록 만들어줍니다 *
'코딩도전기 > Dom' 카테고리의 다른 글
| CODO Day8_Java Script_DOM (0) | 2023.02.10 |
|---|---|
| CODO Day7_Java Script_DOM (0) | 2023.02.09 |
| DOM_TEST (0) | 2023.02.09 |
| CODO Day6_Java Script_Dom(속성&이벤트) (0) | 2023.02.08 |
