JS) Location.hash 와 URL의 #부분 처리

카테고리 : 웹 프로그래밍/HTML

URL에서 #부분은 몇몇 상황에서 활용된다.

  1. 웹페이지 사용자에게 필요한 위치로 이동 (id를 이용)
  2. Callback

만약, 아래와 같이 만들면 ID가 menuul인 위치로 이동하게 된다.

https://hi098123.tistory.com/#menuul

location.hash를 이용하면 #을 포함한 뒷부분의 값을 알아낼 수 있다.

var x = location.hash;
console.log(x); // #menuul

 

Callback 에서

https://url#token=abcdef123456789&expire=3600 와 같이 Callback을 주는경우

 

다음의 이벤트 리스너를 이용할수도 있다.

addEventListener 의 hashchange

function hashHandler() {
  console.log(location.hash);
  //#token=abcdef123456789&expire=3600
}

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

 

IE 8 이상에서 hashchange 를 지원하므로

현존하는 대부분의 브라우저에서 동작한다고 보면된다.

 

저작권 보호안내
무단 전재, 재배포 행위는 금지됩니다. (글을 복사하여 게시금지)
본문의 일부(링크용 문장) 인용은 가능하지만, 출처와 링크(a 태그)를 남기셔야 됩니다.
(웹툴을 이용하고, 스크린샷/녹화하는것은 상관없습니다.)

예외적으로. 저에게 허락받은 경우에는 본문을 전재할 수 있습니다.

만약, 본문 공유를 원하신다면 링크 공유를 해주세요

저작권 정책 확인하기
링크 공유하기

 댓글 (0개)