HTML에서 URL의 앵커(anchor) 부분, 즉 해시(#) 뒤에 오는 문자열이 변경되었을 때 특정 스크립트를 실행하고 싶다면 onhashchange 속성을 사용하면 됩니다.
onhashchange 속성이란?
onhashchange 속성은 URL의 해시(앵커) 부분이 변경될 때마다 지정된 JavaScript 함수를 자동으로 호출하는 이벤트 속성입니다. 주로 <body> 태그에 적용하며, 페이지를 새로고침하지 않고도 앵커 값의 변화를 실시간으로 감지할 수 있어 탭 전환, SPA(싱글 페이지 애플리케이션) 라우팅 등 다양한 기능 구현에 활용됩니다.
예제 코드
다음 코드를 실행하여 onhashchange 속성의 동작을 직접 확인해 보세요.
<!DOCTYPE html>
<html>
<body onhashchange = "display()">
<p>앵커 부분을 변경해 보세요</p>
<button onclick = "change()">변경</button>
<p id = "test"></p>
<script>
function change() {
location.hash = "part2";
var a = "현재 앵커 부분: " + location.hash;
document.getElementById("test").innerHTML = a;
}
function display() {
alert("앵커 부분이 변경되었습니다!");
}
</script>
</body>
</html>코드 동작 방식
- change() 함수: 버튼을 클릭하면
location.hash값을 "part2"로 설정하여 URL의 앵커 부분을 변경하고, 화면에 현재 해시 값을 출력합니다. - display() 함수: 앵커 부분이 변경되는 순간 onhashchange 이벤트가 발생하여 이 함수가 실행되고, 알림창(alert)으로 변경 사실을 사용자에게 알려줍니다.
이처럼 onhashchange 속성을 활용하면 페이지 전체를 다시 로드하지 않고도 URL 해시 변화에 즉각 반응하는 동적인 웹 페이지를 만들 수 있습니다.