[JavaScript] Chrome(또는 IE)에서 뒤로가기 버튼 방지하기

뒤로가기 버튼막기

웹 프로젝트를 하다보면 가끔 Back버튼을 막아야 할 때가 있다.

Chrome의 경우에는 Backspace 버튼을 막아놓은 상태이기도 하다.

Backspace 방지

먼저 Backspace의 경우에는 keydown 또는 onkeydown에서 입력에 관련된 필드를 제외한 나머지에서 preventDefault를 이용하여 이벤트를 방지하는 방법으로 처리하면 된다.

// 뒤로가기 버튼 방지
var killBackSpace = function(e) {
 e = e ? e : window.event;
 var t = e.target ? e.target : e.srcElement ? e.srcElement : null;
 if(t && t.tagName && (t.type && /(password)|(text)|(file)/.test(t.type.toLowerCase()))
  || t.tagName.toLowerCase() == 'textarea') {
  return true;
 }
 
 var k = e.keyCode ? e.keyCode : e.which ? e.which : null;
 if(k == 8) {
  if(e.preventDefault) {
   e.preventDefault();
  }
  
  return false;
 }
 
 return true;
};

if(typeof document.addEventListener != 'undefined') {
 document.addEventListener('keydown', killBackSpace, false);
}else if(typeof document.attachEvent != 'undefined') {
 document.attachEvent('onkeydown', killBackSpace);
}else {
 if(document.onkeydown != null) {
  var oldOnkeydown = document.onkeydown;
  document.onkeydown = function(e) {
   oldOnkeydown(e);
   killBackSpace(e);
  };
 }else {
  document.onkeydown = killBackSpace;
 } 
}

Back 버튼방지

백버튼의 경우에는 화면이 로딩될 때 pushState를 통하여 현재 페이지를 또 추가해놓고 popstate 이벤트에도 현재 페이지를 pushState하여 계속 머무르게 한다.

history.pushState(null, document.title, location.href);
window.addEventListener('popstate', function(event) {
    history.pushState(null, document.title, location.href); 
});