[Javascript] 새로고침 시 알림팝업 띄우고, 뒤로가기 버튼 클릭 시 띄우지 않기

 

 

 

Javascript

사용자에게 입력을 받는 화면을 개발하던 중, 새로고침을 하게되면 작성 중인 데이터가 날라가 이용하는데 불편함을 겪는 이슈가 있었습니다.

이러한 문제를 해결하기 위해서는 새로고침에 대한 확인을 받는 것이 좋다고 생각했습니다.

브라우저 내에서 제공하는 메서드인 window.onbeforeunload 를 이용하여 쉽게 구현할 수 있습니다.

[새로고침 시 알림팝업을 발생시킨다]

특정 문자열을 리턴하지 않으면 알림 팝업이 발생하지 않습니다.
기존에는 팝업내의 메시를 return 값에 넘겨줌으로써 수정할 수 있었지만 특정 취약점으로 인해 변경이 불가능해졌습니다. 
refresh 는 사실상 무의미한 데이터입니다. ""로 넘기셔도 문제없이 팝업이 발생합니다.

MDN - Custom messages in onbeforeunload dialogs (removed)

MDN - WindowEventHandlers.onbeforeunload

 

하지만, window.onbeforeunload 를 사용하면 모든 페이지를 이탈하는 상황에서 알림이 발생하는 문제가 발생합니다. 이를 해결하기 위해서는 특정 상황에서는 window.onbeforeunload 속성을 초기화 해주는 것이 필요합니다.

저같은 상황에서는 뒤로가기 버튼 클릭했을 때는 알림이 필요하지 않았기 떄문에 다음과 같이 구현하였습니다.

[뒤로가기 시 알림팝업을 노출시키지 않는다]

 

빨간색 네모 처리되어 있는 부분은 알림 팝업이 발생되지 않도록 초기화 해주는 부분입니다. 맨 처음 사용된 history.pushState() 는 브라우저의 히스토리를 관리해주는 유용한 메서드입니다.

첫 번째 인자는 페이지 전환 시 값을 넘겨주는 것이 필요할 때 사용합니다. 특정 이름에 매칭되는 값을 저장해주면 됩니다. 단, persist 한 속성을 원하는 경우 storage 를 사용하셔야 합니다.

두 번째 인자는 title 로 페이지에 대한 타이틀을 지정해줍니다.
세 번째 인자는 URL 로 호출되는 URL 을 지정해줄 수 있습니다.
세 인자에 대해 모두 불필요한 경우 null 을 넘겨주면 됩니다.

var state = { 'page_id': 1, 'user_id': 5 };
var title = 'Hello World';
var url = 'hello-world.html';

history.pushState(state, title, url);

 

window.onpopstate 속성은 같은 document 에 관한 두개의 히스토리 엔트리에 변화가 일어날 때마다 event 를 발생시키는 이벤트 핸들러입니다.
popstate 이벤트는 브라우저의 백 버튼이나 (history.back() 호출) 등을 통해서만 발생됩니다.
그래서 주로 뒤로가기 버튼의 이벤트를 컨트롤할 때 사용합니다.

window.onpopstate = function(event) {
  alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
};

history.pushState({page: 1}, "title 1", "?page=1");
history.pushState({page: 2}, "title 2", "?page=2");
history.replaceState({page: 3}, "title 3", "?page=3");
history.back(); // alerts "location: http://example.com/example.html?page=1, state: {"page":1}"
history.back(); // alerts "location: http://example.com/example.html, state: null
history.go(2);  // alerts "location: http://example.com/example.html?page=3, state: {"page":3}

 

 

 

참조

MDN - WindowEventHandlers.onpopstate

MDN - History.pushState()

MDN - 브라우저 히스토리 조작하기