JavaScript의 opener & iframe 사용하기

opener 사용법

1. 부모창에서 팝업창 열기

window.open([URL], [타켓], [option]);

 

팝업창을 여는 방법입니다.

여기서 [URL]은 팝업창에 표시할 웹페이지의 주소, [타켓]은 팝업창의 이름 또는 타겟 속성, [option]은 팝업창의 모양이나 크기 등의 옵션을 설정할 수 있습니다.

2. 자식창에서 부모창 함수 호출

window.opener.[부모창 함수];

 

이 코드를 사용하면 팝업창(자식창)에서 부모창의 함수를 호출할 수 있습니다.

여기서 [부모창 함수]는 호출하고자 하는 부모창의 함수입니다.

 

3. 자식창에서 부모창 ID값 가져오기

opener.document.getElementById([부모창 ID값]).value();

 

팝업창에서 이 코드를 사용하면 부모창의 특정 ID 값을 가져올 수 있습니다.

[부모창 ID값]에는 가져오고 싶은 부모창의 요소 ID를 넣습니다.

4. 자식창에서 부모창 ID에 value 설정하기

window.opener.document.getElementById([부모창 ID값]).value = [변경값];

 

이 코드를 통해 자식창에서 부모창의 특정 요소의 값을 변경할 수 있습니다.

[부모창 ID값]에는 변경하고 싶은 부모창의 요소 ID를, [변경값]에는 새로 설정할 값을 넣습니다.

 

5. 팝업창(자식창) 닫기

self.close();

 

자식창에서 이 코드를 사용하면 팝업창을 닫을 수 있습니다.

간편하면서도 효율적인 방법입니다.

 

 

 

이러한 기능들은 웹 개발에서 다양한 상호작용을 구현할 때 유용하게 사용됩니다.

특히, 사용자에게 추가 정보를 제공하거나 복잡한 입력 양식을 처리할 때 팝업창을 활용하는 경우가 많습니다.

JavaScript의 이러한 기능들을 잘 이해하고 사용한다면, 사용자 경험을 향상시키는 데 크게 기여할 수 있습니다.