[자바스크립트] 팝업창 닫히면서 부모창 액션주기
팝업창 데이터를 부모창에 넘기면서 페이지 액션 submit을 주고 싶은 경우에 target을 설정해서 사용하면 됩니다.
예시> 다음과 같이 팝업창 페이지에서 스크립트를 선언 합니다.
function popupSubmit() { window.opener.name = "parentPage"; // 부모창의 이름 설정 document.popForm.target = "parentPage"; // 타켓을 부모창으로 설정 document.popForm.action = "/target/parentPage2.do"; //부모창에 호출될 url document.popForm.submit(); self.close(); } |
당연하게 팝업 페이지에서는 "popForm" form 이 선언 되어 있어야 합니다.
팝업창에서 popupSubmit() 스트립트를 호출하게 되면 form에 데이터가 target으로 이동하면서 페이지 액션이 일어 나게 됩니다.
이후에 팝업창은 스스로 닫히게 됩니다.
아주 간단한 스크립트이지만 매번 찾게 되는 것 같아 정리를 해봅니다.
1. 팝업창과 부모창 document.domain 값이 동일해야 합니다.
2. target명이 부모창 이름 설정 값(opener.name) 과 동일해야 합니다.
간단한 내용이지만 그래도 이해가 쉽지 않은 분들을 위해 테스트 html를 올려 봅니다.
부모창 페이지 : index.html
<!doctype html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <script> function openPopupWindow() { document.domain = "127.0.0.1"; //document.domain 값이 팝업과 부모창 동일해야 합니다. window.open("popup.html", "popup", "width=200, height=200, resizable=no, scrollbars=no") } </script> <body> <span onclick="openPopupWindow()">TEST</span> </body> </html> |
팝업창 페이지 : popup.html
<!doctype html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>POPUP Window</title> </head> <script> function selfCloseSubmit() { var f= document.forms.popupForm; document.domain = "127.0.0.1"; //document.domain 값이 팝업과 부모창 동일해야 합니다. opener.name = "parentPage"; //유니크한 이름이어야 합니다. f.target = opener.name; f.submit(); self.close(); } </script> <body> <a href="javascript:;" onclick="selfCloseSubmit();">부모창으로 서브밋하고 종료</a> <form name="popupForm" action="change.html"> <input type="text" name="testValue" value="value123456789"> </form> </body> </html> |
변경 호출된 부모창 : change.html 이 호출이 됩니다.
form 설정에 method 설정이 없기 때문에 기본 get 방식으로 호출이 됩니다.
실행을 해서 보면 주소창에 확인을 해보면
http://127.0.0.1/change.html?testValue=value123456789 과 같이 호출이 됩니다.
'경험치바(Experience Opint Bar)' 카테고리의 다른 글
| [체인지 그라운드] 공짜 심리를 활용해 부자되는 법 (0) | 2019.02.14 |
|---|---|
| 정규식 비밀번호 체크 자바스크립트 (0) | 2019.02.12 |
| [체인지 그라운드] 기업의 '꼼수'에 속지 않는 방법 (페스트 컨슈머) (0) | 2019.02.06 |
| sitemesh, spring security 사용 중 헤더 반영이 안될경우 해결방법 (0) | 2019.02.01 |
| [책그림] 사기꾼의 심리학 [우리는 어떻게 뒤통수를 맞는가] (0) | 2019.01.30 |