1. 문제 상황

부모 페이지에서 iframe으로 자식 페이지를 띄우며, window와 mask를 띄운다. iframe에서 window.close()가 실행되지 않음

• 부모 : list.jsp
• 자식 : user.jsp

2. 구현 목표

자식 페이지에서 버튼 클릭 시, 윈도우 창 닫기

1. 부모 페이지 list.jsp에서 iframe으로 자식 페이지 user.jsp 창을 띄운다.
2. 자식 페이지 user.jsp에서 버튼으로 유저 생성이 완료
3. 완료 후, user.jsp창은 닫는다.

일반적으로 단순히, 버튼 클릭시 window.close()를 걸어두면, 창이 꺼지는게 정상이지만, iframe으로 켜지는 창에서 window창이 꺼지지 않았다.

아래는 부모에서 정의된 코드 일부이다.

<!-- list.jsp(부모) -->

<div id="mask"></div>
<div class="window">
    <iframe id="AddFrame"
    		name="AddFrame"
            frameborder="0"
            ></iframe>
</div>
<form name="AddForm"
	  id="AddForm"
      method="post"
      >
      <input type="text" name="uid" value="">
</form>

3. 부모에서 정의

부모페이지 list.jsp에서 window와 mask 닫는 함수 정의

function maskclose() {
	$("#mask, .window").hide();
}

부모페이지에서는 window.close()가 정상적으로 작동하는걸 확인했다.

4. 자식에서 부모함수 호출

자식페이지에서 띄워진 윈도우가 아니라 window.close()가 작동하지 않는다.

• 따라서, 부모페이지에서 정의된 함수를 자식페이지에서 호출한다.

parent.window.maskclose();

5. 피드백

위 내용을 통해, parent에서 정의된 함수를 불러오는 방법을 배웠다.
지금같은 상황뿐만 아니라 부모를 통해 연계되는 부분에서는 부모함수 등을 이용하면 되겠다.

6. References

1. classe82 blog