태그 보관물: Hash

브라우저의 ‘뒤로 가기’ 버튼 막기

특수한 경우에 브라우저의 ‘뒤로 가기’ 버튼을 막아야 하는 상황이 있습니다. 물론 권장할 만한 것은 아니지만, 필요한 경우가 있으니까요.


위 버튼을 클릭하면 해시를 사용해서 ‘뒤로 가기’ 버튼으로 해시가 지워지면, 다시 해시가 추가되도록 처리하여 ‘뒤로 가기’ 버튼을 무력화 시켰습니다. 물론 ‘뒤로 가기’ 버튼을 오른큭릭 하여 이전 페이지로 넘어가는 것을 막을 수는 없습니다.
그리고 현재 페이지 내에서 #name을 사용한 화면 이동도 사용할 수 없게 됩니다. 뭐, 약간의 코드를 추가하면 되겠지만…

다음 소스를 통해서 간단히 적용할 수 있습니다.

1
2
3
4
history.pushState(null, null, "#noback");
$(window).bind("hashchange", function(){
  history.pushState(null, null, "#noback");
});

location.hash vs. history.pushState()

URL의 해시 값을 제어하기 위해서 아래와 같이 location.hash를 사용합니다.

location.hash = "string";

그런데 모바일 브라우저에서 location.hash가 변경되면 다음 이미지처럼 주소표시줄이 화면에 나타납니다.
hash_change

이를 피하려면 HTML5의 history.pushState() 함수를 이용하면 됩니다.

history.pushState(null, null, "#string");

단, history.pushState() 사용할 때 주의할 점은, location.hash와는 달리, 실행 시에 Window.onhashchange 이벤트가 발생하지 않는다는 것입니다.

location.hash = "string";//trigger onhashchange event
history.pushState(null, null, "#string");//DON'T trigger onhashchange event

참고 링크
Location hash Property
Manipulating the browser history
Window.onhashchange