목차
- onhashchange 예제 - 해시값 변경 시 실행
- onhashchange 정의
- onhashchange 구문
onhashchange 예제 - 해시값 변경 시 실행
<!DOCTYPE html>
<html>
<body onhashchange="homzzang()">
<button onclick="changeHash()">해시변경</button>
<p id="demo"></p>
<script>
function changeHash() {
location.hash = "index5";
var x = "현재 해시: " + location.hash;
document.getElementById("demo").innerHTML = x;
}
function homzzang() {
alert("해시값 바뀜.");
}
</script>
</body>
</html>
onhashchange 정의
앵커 태그(<a>)의 해시값(#기호로 시작하는 값) 변경 시 실행할 코드 지정.
1. onhashchange 속성 사용 가능 태그 종류
<body>
2. 해시값 예제
https://homzzang.com/test.php#index5
3. onhashchange 이벤트 발생 경우
- location.hash (또는, location.href) 속성의 속성값 변경.
- 다른 북마크 페이지로 이동. ("뒤로"/"앞으로" 버튼 사용)
- 북마크 된 앵커 링크 클릭.
4.
IE8 이상 주요 최신 브라우저 모두 지원.
onhashchange 구문
HTML 방식
- <element onhashchange="myScript">
JS 방식 (3가지)
- object.onhashchange = ()=>{myScript};
- object.onhashchange = function(){myScript};
- object.addEventListener("hashchange", myScript);
[속성값]
myScript
앵커 태그의 해시값 변경 시, 실행할 JS 코드
- 주의: 함수명 사용 시, 다른 곳은 전부 소괄호까지 사용해 함수 호출하나 핑크색 myScript 자리는 "함수명만" 사용해 함수 호출.
- 사용 방식 통일 권장.
