javaScript - 레이어 팝업 history.back 감지

웹 모바일 개발하면서 레이어팝업에서 뒤로가기는 누르게 되면 비정상적인 움직임을 하는 것 알게되었습니다.

레이어팝업에서 뒤로가기를 하게 되면 부모화면이 닫히거나 history.back()이 됩니다.

단지, 레이어팝업을 닫하고 싶을 때는 어떻게 구현해야할지 찾던 중에 좋은 코드가 떠올라서 공유할겸 포스트해봅니다.

 

1. 사용할 메소드

history.pushState(data, title, url)

window.addEventListener(이벤트명, 함수)

window.removeEventListener(이벤트명, 함수)

addEventListener와 removeEventListener에 바인딩할 함수

 

위와 같이 4가지 정도 준비물이 필요합니다.

해당 메소드들의 역할은 이 글에서는 다루지 않겠습니다. 

바로 구현 예제보겠습니다.

function openPopup() {
	history.pushState(null, null, window.location.href);
	window.addEventListener('popstate', bindPopupClose);
	...
}

function bindPopupClose(e) {
	closePopup(true);
}
      
function closePopup(isEventListener) {
	...
	window.removeEventListener('popstate', bindPopupClose);
	if(isEventListener == false) {
    		setTimeout(function() {
        		history.back();
		}, 200);
	}
}

예제 코드를 보시면 우선 팝업 진입 시 openPopup() 메소드를 실행합니다.

여기서 핵심은 history.pushState(null, null, window.location.href) 코드 입니다. 

pushState 메소드를 이용해서 브라우저 history에 해당 페이지를 한번 저장합니다. 

그럼 동일 페이지가 2번 저장되어있을 것입니다.

하지만, pushState 메소드를 사용함으로써 window.addEventListener('popstate', bindPopupClose) 코드가 작동할 수 있습니다. 

window.addEventListener('popstate', bindPopupClose)는 브라우저에서 뒤로가기를 눌렀을 때 해당 이벤트를 감지할 수 있습니다.

꼭, history.pushState(null, null, window.location.href)을 하셔야 window.addEventListener('popstate', ...) 메소드가 작동합니다!!!

 

그 다음 bindPopupClose 메소드를 addEventListener에 바인드합니다.

window.addEventListener('popstate', ...) 이벤트가 발생하면 bindPopupClose 메소드가 작동하게 되는 것이죠.

즉, 레이어 팝업에서 뒤로가기를 누르면 레이어 팝업이 닫히게 됩니다.

 

마지막으로 closePopup 메소드를 살펴보면 인자를 하나 받습니다. 

해당 인자는 이벤트 리스너에 의해 closePopup 메소드가 실행하는지, 사용자가 닫기 버튼을 눌려서 실행되는지를 구분하는 인자입니다.

팝업에 닫기 버튼이 있다면 closePopup(false)로 호출하시면 됩니다.

closePopup(false)로 호출 시 history.back()을 하게 되는데, 이는 처음에 openPopup 메소드를 호출하면서 브라우저 history에 해당 페이지 url이 두번 저장되기 때문에 한번 history.back()을 해주는 것입니다.

history.back() 호출해도 url이 같음으로 화면에는 아무런 변화가 없을 것입니다.

 

이렇게 레이어팝업 뒤로가기 기능을 구현해보았습니다. 

좀 더 좋은 방법이 있으면 공유하면 좋겠습니다~~~