[JavaScript] 자식창의 정보를 부모창에 전달하는 방법

2023-06-21

---

사진: Unsplash 의 NEOM

---

1. 방법

 

부모 창에서 자식 창 열기

자식 창을 열 때, 부모 창에서 변수를 설정하여 전달합니다.
예를 들어, child.html을 열 때 URL에 프래그먼트 값을 추가하여 전달할 수 있습니다.

var fragmentValue = "전달할 값";
var childUrl = "child.html#" + fragmentValue;
window.open(childUrl, "popup");

---

자식 창에서 부모 창으로 데이터 전달

자식 창에서 window.opener를 사용하여 부모 창에 접근할 수 있습니다.

var fragmentValue = window.location.hash.substring(1); // 프래그먼트 값 가져오기
window.opener.receiveData(fragmentValue); // 부모 창 함수 호출
window.close(); // 자식 창 닫기 (필요한 경우)

---

부모 창에서 데이터 수신

부모 창 스크립트에서 수신 함수를 정의합니다.
예를 들어, 부모 창에서 receiveData 함수를 정의하여 데이터를 수신합니다.

function receiveData(data) {
  // 전달된 데이터 사용
  console.log("전달받은 값:", data);
}

---

메인 이미지 출처 : 사진: Unsplash의NEOM