opener - popup관련, 자식 부모창 제어하기

- opener

브라우저에는 메인 화면과 팝업창이 존재할 때 가 있다. 이때 팝업창과 메인 화면에서 데이터를 서로 이용하거나

 

이벤트를 전달해야할 때 가 있다. 이럴 때 사용할 수 있는 개념이 'opener'다.

 

- 사용법

어차피 필요하면 찾아서 사용하게 되는데 내가 오늘 사용한 개념만 간단히 정리하자.

 

자식에서 부모값을 사용할 수 있고 부모에서 자식값을 사용할 수 있다.

 

부모란 메인페이지를 말하고 자식이랑 팝업창을 말한다. 

 

- 실습

노란창이 부모고, 빨간창(팝업)이 자식이다.

var a = 10
window.open()
// 팝업 열기 위한 명령어

이와같이 부모창의 콘솔에서 변수를 만들어주고 팝업을 열어주었다.

 

opener.a

window.opener 라고 사용해도되지만 자식창에서 opener.a를 입력하자 부모창의 a값을 가져오는 모습을 볼 수 있다.

 

이를 활용해서 여러가지 이벤트도 만들 수 있다. 내가 오늘 활용한 이벤트는

 

"팝업에서 버튼클릭 혹은 특정이벤트를 클릭 했을 때 부모창을 reload()하기" 였다.

if(opener.a==10){
opener.location.reload();
}

조건은 다양하게 줄 수 있다. 심지어 opener.location부터 opener.locaion.search과 URLSearchParams 등을 결합해

 

변수를 주지 않고도 전페이지의 정보를 이용해 사용할 수 있다.

 

if(조건){
var = urlParams = new URLSearchParams(opener.location.search);
var 변수 = urlParams.get("정보");
if(변수 == 조건){
opener.location.reload();
}
}

이와 같이도 활용할 수 있다.

 

핵심은 브라우저에서 부모, 자식(팝업) 창에서 서로 데이터를 전송하고, 제어할 수 있다는 사실이다.

 

심지어 css의 id값등 활용은 무궁 무진하다.

 

-참고한글

https://redcow77.tistory.com/531

https://stackoverflow.com/questions/10792408/open-popup-and-refresh-parent-page-on-close-popup

https://lasdri.tistory.com/1456

https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EB%B6%80%EB%AA%A8%EC%B0%BD-%E2%9E%9C-%EC%9E%90%EC%8B%9D%EC%B0%BD%EC%9D%98-%EA%B0%92-%EC%A0%84%EB%8B%AC#%EC%9E%90%EC%8B%9D%EC%B0%BD%EC%97%90%EC%84%9C_%EB%B6%80%EB%AA%A8%EC%B0%BD%EC%9D%98_%EA%B0%92_%EA%B0%80%EC%A0%B8%EC%98%A4%EA%B8%B0

https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=mk1126sj&logNo=220986157391

https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams