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

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 항목은 *(으)로 표시합니다