[JavaScript] 자식 창 닫고 부모 창 새로고침 (feat. 자식 창에서 부모 창 새로고침 함수 호출)

 

siso 프로젝트를 진행하던 도중 관리자가 만든 마을회관을 삭제처리 후 부모 창을 새로고침 후 자식 창을 닫아야 했다.

 

우선 동작 과정은 다음과 같다.

• localhost:8080/villagehall/delete/id로 컨트롤러 호출
• DB에서 정보 삭제 진행
• JS에서 부모 창 새로고침 후 자식 창 닫기

 

다양한 방법을 쓰다가 잘 되지 않던 도중에 아래의 코드로 해보니 작동은 됐지만...

창이 안 닫히거나 새로고침이 너무 빨리 돼 수정된 값으로 보이지 않았다.

그렇다고 setTimeout의 시간을 길게 줘버리면 창은 안 닫히는 현상이 발생했다.

function popupClose(){
	setTimeout(function () {
    	window.opener.document.location.href = window.opener.document.URL;
    	window.close();
	}, 45);
}

 

그 외에 자식 창 닫히면 감지하여 새로고침을 하는 방법 여러 가지를 해봤지만 그마저도 안 되었다..

---

그래서 나는 자식 창이 닫히기 전 부모 창의 새로고침 함수를 호출하는 방법을 사용하기로 하였다!

 

부모 창 JS

function villageHallPopup(id, name){
    window.open("/villagehall/"+id, "VillageHallInfo", "width=700px,height=550px,top=200px,left=200px;");
}

function reload(){
    setTimeout(function () {
    location.reload();
    }, 300);
}

villageHallPopup을 통해 자식 창을 띄우고,

자식 창에서 close 하기 전에 reload 함수를 호출할 건데

이때 시간은 300ms를 줄 것이다. (웬만해선 DB 적용 후 새로고침이 되지만 안 될 경우 시간 늘려보기!)

왜냐하면 DB를 접근하여 삭제를 마치고 새로고침을 실행해야 하기 때문이다!

 

자식 창 JS

function deleteVillageHall() {
    const id = [[ ${villageHall.id} ]];
    const hallName = [[ ${villageHall.hallName} ]];
    if ( !confirm(hallName + "을 삭제할까요?") ) {
        return false;
    }

    window.location.href = '/villagehall/delete?id='+id;

    opener.parent.reload();

    window.close();
}

opener.parent.reload();
부모 창의 함수를 부르는 코드이다.

 

위의 함수를 이용하고 close를 해주면 끝이다!

 

(혹시 시간을 더 주겠다고 reload에 setTimeout을 주면 안 되는 거로 확인되어서 부모 창에서 시간을 늘리면 된다!)

---

이제는 진짜 되다 안 되다가 아니라 그냥 된다!!!

 

삽질 끝..!