(JavaScript) 팝업창으로 값 전달하고 받아오기 (opener 함수의 이해)

처음 이벤트가 발생하기 전 창을 부모창,
팝업창 띄우기로 열린 새로운 창을 자식창이라고 한다.

부모창 -> 자식창에 값을 전달할 수 있다(==자식이 opener 함수 호출로 부모창의 값을 가져올 수 있다)

팝업창으로 전달 : 
<input type="text" id="parentInput" /><button id="sendPopup">전달하기</button>

팝업창에서 받아온 값 : 
<input type="text" id="result" readonly />

팝업창으로 전달 : 전달하기
팝업창에서 받아온 값 :

위 코드에서 input태그에 id="parentInput"
input값을 팝업창으로 전달하는 button에는 id="sendPopup"로 정해주었다.

아래 코드는 팝업창을 생성하는 javaScript코드이다.

const sendPopup = document.getElementById('sendPopup');

sendPopup.addEventListener('click', () => {
  window.open('팝업.html', '팝업창', 'width=500, height=500');
});

위의 코드를 해석하면, 먼저 sendPopup변수에 button을 저장하였고,
addEventListener로 click을 하면 window.open()함수를 호출할 수 있게 했다.
window.open() 함수는 팝업창을 열리게 하는 window 객체의 함수이며

문법은 아래와 같다.

var ret = window.open(url, name, specs, replace);

자세한 내용은 다음 게시글에 정리하겠다.

이렇게 생성된 팝업창은 다음과 같다.

부모로 부터 전달 받은 값 :

부모창으로 전달 : 전달하고 창닫기

부모로 부터 전달 받은 값 : <span id="message"></span>

부모창으로 전달 : <input type="text" id="childInput" />
<button id="sendParent">전달하고 창닫기</button>

부모창에서 전달 받은 값이 나타나는 span태그와 부모창으로 전달할 text타입의 input태그에 각각 id="message", id="childInput"로 id를 지정해 주었다.

	// 부모 창에 작성된 #parentInput의 값 얻어오기
	// opener == 부모창
	const parentValue = 	opener.document.getElementById('parentInput').value; 
	// input이기 때문에 value 나머지는 innerText
	// #message에 부모로 부터 얻어온 값 출력하기
	document.querySelector('#message').innerText = parentValue;

	// 부모창으로 값 전달하기
	const childInput = document.getElementById('childInput');
	const sendParent = document.getElementById('sendParent');

	sendParent.addEventListener('click', () => {
	// 부모창의 #result ( input 태그 )에
	// #childInput에 작성된 값 대입
	opener.document.getElementById('result').value = childInput.value;

	window.close();

});

부모 창에 작성된 #parentInput의 값을 얻어오고 opener.을 통해 부모창의 값을 불러올 수 있다.
#message에 부모로 부터 얻어온 값 출력하고,
부모창으로 값을 전달하기 위해 input태그와 button에 각각 'childInput', 'sendParent'id를 지정해주었고,
부모창의 #result (input 태그)에 #childInput에 작성된 값을 대입연산자를 사용하여 값을 대입해주었다.

sendParent.addEventListener('click', () => {
        // 부모창의 #result ( input 태그 )에
        // #childInput에 작성된 값 대입
opener.document.getElementById('result').value = childInput.value;

window.close(); //열린 팝업창(자식창) 닫기

});