경험치바(Experience Opint Bar)

[자바스크립트] 팝업창 닫히면서 부모창 액션주기

tnsgud 2019. 2. 8. 10:33
반응형

[자바스크립트] 팝업창 닫히면서 부모창 액션주기

팝업창 데이터를 부모창에 넘기면서 페이지 액션 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 과 같이 호출이 됩니다. 



반응형