[JavaScript] 자바스크립트에서 해시 변경 확인하기

099_자비스크립트에서 해시 변경 확인하기

[적용]

• 해시값이 변경될 때마다 작업을 처리하고 싶을 때

---

[문법]

이벤트	발생 타이밍
hashchange	URL의 해시가 변경되었을 때

---

[내용]

URL의 #(해시)가 변경될 때마다 작업을 처리하고 싶을 때 window 객체의 hashchange 이벤트를 확인한다.

#(해시)가 변경되는 타이밍은 다음과 같다.

• 페이지 내 앵커 링크를 클릭할 때
• 브라우저의 '뒤로 가기', '앞으로 가기' 버튼을 눌렀을 때
• 유저가 URL의 해시를 변경할 때

 

페이지 내 앵커 링크를 만들어 각각 '현재 앵커는 '#apple'입니다. 현재 앵커는 '#orange'입니다.' 로

전환이 가능한 샘플을 만들어 보자.

주소창에는 #apple과 #orange가 포함되어 있다.

 

// 해시 변경 이벤트 감시
window.addEventListner('hashchange', handleHashChange);
handleHashChange();

function handleHashChange() {
    // 변경 후의 해시값
    const hash = location.hash;
    document.querySelector('.log').innerHTML = `현재 앵커는 ${hash]입니다.`;
}

 

 

---

 

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김