목차
- onpopstate 예제 - 브라우저 히스토리 변경 시 실행
- onpopstate 정의
- onpopstate 구문
onpopstate 예제 - 브라우저 히스토리 변경 시 실행
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>onpopstate 예제</title>
</head>
<body>
<button onclick="changeUrl()">URL 변경</button>
<script>
function changeUrl() {
history.pushState({}, "", "/new-url");
}
window.onpopstate = function(event) {
alert("홈짱닷컴 Homzzang.com");
};
</script>
</body>
</html>
결과보기
onpopstate 정의
브라우저 히스토리 변경 (= 뒤로가기/앞으로가기 버튼 클릭) 시 실행할 코드 지정.
1. onpopstate 속성 사용 가능 태그 종류
없음. (※ JavaScript window 객체에서만 사용 가능.)
2.
주요 최신 브라우저 모두 지원.
onpopstate 구문
JS 방식 (3가지)
- window.onpopstate = ()=>{myScript};
- window.onpopstate = function(){myScript};
- window.addEventListener("popstate", myScript);
[속성값]
myScript
브라우저 히스토리 변경 시, 실행할 JS 코드
- 주의: 함수명 사용 시, 다른 곳은 전부 소괄호까지 사용해 함수 호출하나 핑크색 myScript 자리는 "함수명만" 사용해 함수 호출.
- 사용 방식 통일 권장.
