728x90
부모 창에서 자식 창을 열고,
자식 창에서 부모 창으로 데이터를 전달하는 방법을 알아보겠습니다.
test_parent.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=s, initial-scale=1.0">
<script defer src="test_parent.js"></script>
</head>
<body>
<button id="btn_open_child">자식 창 열기</button><br>
<h4 id="data_from_child">받아온 데이터 : </h4>
</body>
</html>
test_child.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=s, initial-scale=1.0">
<script defer src="test_child.js"></script>
</head>
<body>
<textarea id="data_to_send"></textarea><br>
<button id="btn_send_data">데이터 보내기</button>
</body>
</html>
test_parent.js
//자식 창 열기 버튼 클릭 이벤트
document.querySelector('#btn_open_child').addEventListener("click", () => {
window.open("test_child.html", "_blank", `width=1000, height=600, toolbars=no, scrollbars=yes`);
});
//자식창에서 받아온 데이터 처리
window.call = function (data) {
document.querySelector('#data_from_child').innerHTML += data;
}
test_child.js
//데이터 보내기 버튼 클릭 이벤트
document.querySelector('#btn_send_data').addEventListener("click", () => {
let data = document.querySelector('#data_to_send').value;
opener.call(data); //부모 창으로 데이터 보내기
window.close(); //자식 창 닫기
});
위 코드는 부모 창에서 자식 창을 열고
자식 창에서 작성한 텍스트를 부모 창으로 보내 띄워줍니다.
'JavaScript' 카테고리의 다른 글
| [Javascript] 템플릿 리터럴 (Template Literals) (0) | 2022.11.19 |
|---|---|
| [ JavaScript ] 게시판 만들기 예제 (2) | 2022.10.24 |
| [JavaScript] Web Notification 구현하기 (0) | 2022.10.06 |
| [Javascript] scrollIntoView를 사용해 화면 하단으로 이동하기 (0) | 2022.09.24 |
| [JavaScript] addEventListener 한 번만 동작하게 만들기 (0) | 2022.09.21 |
