[JavaScript] Location.hash 로 URL 활용하는 방법

Location.hash란?

URL 내 '#' 뒤에 나오는 식별자를 value로 하는 DOMString

ex) daum.net#domstring

 

hash의 쓰임새

- #id를 활용해 클릭할 때 지정한 anchor로 이동

- ajax 호출, 뒤로가기 등 사용 가능

- window.location 속성을 통해 접근

  (window 생략 가능)

 

문법

var string = object.hash;

console.log(string);

 

<a id="location" href="/en-US/docs/Location.href#demo">Examples</a>
<script>
  var anchor = document.getElementById("location");
  console.log(anchor.hash); // Returns '#demo'
</script>

​

​

Callback
addEventListner를 이용한 별도 처리하는 방법

function hashHandler() {
  if (location.hash === '#tab01') {
    console.log("첫 번째 탭");
  }else if(location.hash ==='#tab02'){
    console.log("두 번째 탭");
  }
}

window.addEventListener('hashchange', hashHandler, false);