크롬 뒤로가기 이벤트 감지 - keulom dwilogagi ibenteu gamji

Action

좋아요 0 컬렉트 0 첨삭제안 음… 0 신고하기

Share

Twitter Facebook 공유

Brad P. @brad

안녕하세요?^^ 개발자라는 소리를 듣고 싶어 늦은 나이에 개발의 세계에 몸담게 된 Brad 라고 합니다. 아직 개발의 'ㄱ' 자도 모르지만, 개발을 배우면서 알게되는 것들을 림프에 정리해보려고 합니다. 저의 부족한 글이 누군가에게 조금이나마 도움이 되길 바랍니다.

window.onpageshow = function(event){
    if (event.persisted || (window.performance && window.performance.navigation.type == 2)){
        // 사파리 or 안드로이드에서 뒤로가기로 넘어온 경우(캐시)
        window.location.reload();
    }
};

onpageshow는 page 호출되면 캐시든 아니든 무조건 호출됨

사파리의 경우 뒤로가기 하면 캐시를 이용해 화면 보여주는데 이때 event.persisted 가 true임

그외 브라우저(크롬만 해봄;)에서는 window.performance && window.performance.navigation.type == 2 이걸로 뒤로가기인지 체크 가능하다.

출처 : https://ifuwanna.tistory.com/63

공유하기

게시글 관리

'Javascript' 카테고리의 다른 글

이벤트를 캐치했으면 이전 POST 페이지로 정상적으로 갈수 있도록 스크립트를 통해 데이터를 SUBMIT하거나 혹은 history를 조작하여 이전 페이지로의 이동을 막아주시면 됩니다. 

 Example

var backControl = function(callbackFunction) {
      //window 내 mouse 위치 여부를 체크하기 위한 변수 
      window.innerDoc = false; 		
      //mouseover Event Listener 
      window.addEventListener('mouseover', function(event) {    
          window.innerDoc = true;
      }); 
      // mouseout Event Listener 
      window.addEventListener('mouseout', function(event) {                
          window.innerDoc = false;
      });
      // 바로 이전 페이지로 이동하는 것을 막기위해 history State 추가 
      history.pushState({page:"first"},  document.title, location.pathname + '#first');
      
      //popstate Event Listener 
      window.addEventListener('popstate', function(event) { 
	  // history State 추가하여 페이지 이동 막음 (뒤로가기 막기)
	  history.pushState({page:"historyChanged"},  document.title, location.pathname + '#changed');	
	
	  // window 영역 밖에서 history가 변경 됐을경우 callbackFunction 실행 ( 뒤로가기 버튼 등 )  
	  // 이전 POST 페이지에 정상적으로 데이터 재전송하여 SUBMIT 등 수행
	  if (!window.innerDoc) { 
	      callbackFunction();
	  } 
       });  
}

// window 영역 밖의 핸들링 되지 않은 버튼으로 history 변경 이동했을 경우 실행할 Function
var callbackFunction = function() {
	// document.referrer 등 체크하여 이전 POST 페이지로 정상 이동 할 수 있도록 데이터 생성 및 추가 및 submit
	// window 내 버튼 등을 통한 이동 외에 페이지 이동 불가 alret 안내 등 처리 
}

//스크립트 실행
backControl(callbackFunction);

 제약사항

처리방식을 보면 아시겠지만 사실 이 방법은 완벽하지 않은 방법입니다.

단순 뒤로가기 막기는 PC, MOBILE 환경에 관계없이 적용이 가능하나 

window.innerDoc 값 체크를 통하여 뒤로가기 버튼 판단 후 함수 실행하는 로직은  페이지내에서 스와이프같은 인터액션으로 이동했거나 모바일 브라우저 일경우는 history 변경시 mouse 위치를 통해 뒤로가기라는 여부를 판단할 수 없기 때문에 PC 환경에서만 제한적으로 적용이 가능합니다.

모바일환경의 대부분의 브라우저는 뒤로가기를 통해 POST로 재전송할 경우 바로 만료페이지가 뜨지않고 데이터 재전송 여부를 묻기 때문에 이전 페이지 진입 후 웹페이지 만료에대한 이슈는 적은 편이긴 합니다.

그리고 브라우저마다 이벤트 동작하는 것이 조금씩 다르기 때문에 생기는 제약사항들도 있습니다.  예를 들어 크롬 브라우저같은 경우 WINDOW내 아무 액션 없이 바로 뒤로가기를 누를 경우 popstate 이벤트를 포함한 아무런 이벤트도 발생하지 않습니다.  아마 보안상의 이유인듯 싶네요.