Jquery mobile 뒤로가기 이벤트 - jquery mobile dwilogagi ibenteu

Question

��̺긮�� Դϴ�.
�ȵ��̵� �� Ẹ�ô� �е��̽ø� �ƽð�� ȵ��̵� �� ڷΰ�� ư�� history.back() �� մϴ�.

�� css�� ˾� ��ϰ� �� �� ִµ� ��ڵ�� ˾� �ݴ¹�ư�� ʰ� ��ǽ�� ڷΰ�� ư�� 鼭 �˾�� ʰ� �ƿ� �� ڷ� �̵��ع�� ߻��ϳ׿�;;

�ڷΰ�� ư ó�� Ҽ��?

[WEB/jQuery/javaScript] 뒤로가기 이벤트 감지하기

공 ・ 2019. 5. 28. 0:52

어떤 신청 페이지에서 완료 페이지로 넘어간 후, 뒤로가기 이벤트로 다시 신청 페이지로 접속하면 입력된 값이 그대로 노출되는 이슈가 있었다.

브라우저가 이전 페이지에 캐시가 있는지 확인하는 Back Forward Cache 때문이라고 한다.

응답 속도 향상 등, 필요한 기능이겠지만, 일단 내 상황에서는 불필요한 기능...

처음에는 완료 페이지에서 뒤로가기 이벤트를 제어하려고 했다. (히스토리 조작 참고 : https://developer.mozilla.org/ko/docs/Web/API/History_API)

history.pushState(null, null, location.href); window.onpopstate = function(event) { // 처리 }

정상 작동하지만, 뒤로가기를 아예 못하는 것 보다는 history back으로 신청 페이지로 간 후 후처리를 해주고 싶어졌다.

검색하면 다음과 같은 persisted 값을 이용하라고 한다.

window.onpageshow = function(event) { if (event.persisted) { // 처리 } }

그치만 웬걸 persisted의 값은 계속 false.

나는 바빠서 크롬에서밖에 안해봤는데, IE와 크롬에서 안된다고 한다.

그래서 다음과 같은 조건 추가.

window.onpageshow = function(event) { if ( event.persisted || (window.performance && window.performance.navigation.type == 2)) { // 처리 } }

window.performance.navigation.type 에 대한 설명은 아래 사이트를 참고 바랍니다.

https://developer.mozilla.org/ko/docs/Navigation_timing

뒤로가기 제어하기

방법 1.

window.onpopstate = function(event) {
  // "event" object seems to contain value only when the back button is clicked
  // and if the pop state event fires due to clicks on a button
  // or a link it comes up as "undefined" 
  if(event){
    // Code to handle back button or prevent from navigation
  }
  else{
    // Continue user action through link or button
  }
}

방법 2.

페이지 리로드하지 않고 url만 변경하기

history.pushState( state , 'title', 'url');
참고 : https://developer.mozilla.org/ko/docs/Web/API/History/pushState

state = 상태 값을 나타내는 것으로 브라우저에서 앞/ 뒤로 갈 때, 넘겨줄 데이터
title = 변경할 브라우저 제목 (변경을 원하지 않으면 null)
url = 변경할 브라우저 URL

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

브라우저에서 뒤/앞으로 가는 버튼 클릭 시 onpopstate 이벤트가 발생한다.
이때 콜백함수에서 event.state는 pushState 함수의 인자 값이였던 state 객체가 넘어온 것이다.

방법 3. 태그에 웹브라우저 뒤로가기 / 앞으로가기 추가

//뒤로가기
window.history.back();

//앞으로가기
window.history.forward();

//특정페이지로 이동하기
window.history.go(number ex) 1,2,3,-1) // 안에 숫자를 적어넣어 특정페이지로 이동
//만약 -1 을 넣은 경우 : back()와 동일한 효과
//만약 1을 넣은경우 : forword()와 동일한 효과

방법 4. 뒤로가기 막고 모달 띄우기

 window.history.pushState(null, '', location.href);

window.onpopstate = () => {
  history.go(1);
  this.handleGoback();
};

 window.onpopstate = () => {
   history.go(1);
   this.handleGoback();
   
   //여기에 모달창 코드 
 };

이 구문은 뒤로가기 액션이 들어올때 히스토리를 한칸 앞으로 옮겨줍니다. 실질적으로 뒤로가기가 되지 않는 효과가 있습니다. 이후 모달을 닫는 로직이 들어있는 함수를 실행 시켜주었습니다.

여기서 한가지 주의 할 점은 이후 모달이 삭제되어야 한다는 점입니다. 만약 삭제 되지 않고 display:none 등으로 처리되면 뒤로가기 할때에 다시 마운트 되고 계속 히스토리 스택을 쌓으려고 하기 때문에 주의 하여야 합니다.

참고
https://jintaewoo.tistory.com/13

https://developer.mozilla.org/en-US/docs/Web/API/History_API#The_pushState()_method

https://velog.io/@bclef25/%EC%9B%B9%EC%97%90%EC%84%9C-%EB%92%A4%EB%A1%9C%EA%B0%80%EA%B8%B0%EB%A5%BC-%EB%A7%89%EA%B3%A0-%EB%AA%A8%EB%8B%AC%EC%9D%84-%ED%81%B4%EB%A1%9C%EC%A6%88-%EC%B2%98%EB%A6%AC%ED%95%98%EA%B8%B0-%EC%9C%84%ED%95%9C-%EB%B0%A9%EB%B2%95

https://developer.mozilla.org/ko/docs/Web/API/WindowEventHandlers/onhashchange

jQuery Mobile에서 이전 페이지(previous page)로 가는 Back 버튼을 넣을 때, 여러가지 방법이 있는데요.

종종, <a href="javascript:history.back()">Back</a> 이렇게 할 경우가 있는데요.

해당방법을 이용하면, 종종 Mobile에서 오작동이 일어날때가 있곤한다.

Javascript로 하는 또다른 방법은 $.mobile.back() 을 사용하는 것입니다.

jQuery Mobile에서 Back버튼에 대해서,

추천해주는 방법 data-rel="back"를 이용하길 권해 준다.

개인적으로 항상 history.back를 썼는데, 다 변경해야 할 것 같다. ㅠ_ㅠ

참조: https://stackoverflow.com/questions/5740934/jquery-mobile-back-button

참조속의 링크: Anatomy of a Page

참조2: ($.mobile.back()함수)
https://stackoverflow.com/questions/8206108/how-to-navigate-back-one-page-using-mobile-changepage

도움이 되셨다면 하트모양의 "♡ 공감"을 눌러주시면 큰 격려가 됩니다.
(로그인하지 않으셔도 가능)