자식 iframe 새창 열고닫기 + submit 후 리로드 방법

iframe으로 팝업창을 열고 닫는 기능을 만들었다.

 

우선 부모격인 페이지에

<div id="pop">

<iframe src="" name="popupframe"></iframe>

</div>

<button type="button" onclick="openPop(팝업으로 띄울 자식 페이지 주소, 너비값, 높이값);">팝업창 열기</button>

pop의 아이디를 가진 div로 감싸주고 요기에 스타일을 준다. iframe은 width:100%; height:100%으로 맞추면 보수할 때 좀더 간편하다.

버튼을 누르면 팝업창이 뜨도록 함수도 짜준다.

 

function openPop(src, w, h){

  var popup = document.getElementById('popup');

  document.popupframe.src = src;   //팝업으로 띄울 자식넘의 주소를 프레임의 src 값으로 넣는다.

  popup.css({    //갑분 제이쿼리..ㅎ

    'width' : w + 'px',

    'height' : h + 'px'

  }).show();

}

function closePop(){

  $('#pop).hide();     //귀찮으니 그냥 제이쿼리를 쓴다.하하

}

 

이러면 팝업이 열리는 openPop과 닫히는 closePop 함수가 생성된다.

openPop함수는 팝업창 열기 버튼에 넣었고, closePop은 닫기 버튼을 만들어서 넣으면 된다.

 

 

(+번외)

 

그런데!

iframe에서 데이터를 submit 하고 창 닫기 + 부모창 리로드를 하려고 하니, 잘 되지 않는다.

 

!자식창에서 데이터를 전송하고 자동으로 창 닫기 + 리로드 하는 방법!

<button type="button" onclick="submit_data()">저장</button>

 

- button submit으로 하지 않은 이유는 submit_data() 함수에서 한번 유효성 검사로 걸러준 뒤 다른 php페이지에서 서버로 전송 처리를 해줘야 했기 때문. 타입 submit하면 버튼 누르자마자 그냥 값이 넘어가 버림.

또한! 타입 submit은 자동 리로드되지만 button은 자동 리로드가 안되기 때문에 따로 설정을 해줘야 한다.

 

그래서 데이터 전송하는 php 파일 하단에 스크립트 쑤셔넣기!

<script>

  parent.window.closePop();      //먼저 닫아주고 리로드하면 더 좋겠쥬?

  parent.window.location.reload();

</script>

 

parent.window로 부모창을 불러내고 closepop 함수를 실행시켜 창을 자동으로 닫게 한다. + 리로드한다.

 

이렇게 되면 닫기 버튼은 똑같이 적용해주면 된다.

<button type="button" onclick="parent.window.closePop();">닫기</button>

 

참쉽죠?