현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.
Summary
window의 popstate 이벤트 핸들러
같은 document에 관한 두개의 히스토리 엔트리에 변화가 일어날 때마다, popstate event가 window 객체에 붙게 된다. 만약 활성화된 엔트리가 history.pushState() 메서드나 history.replaceState() 메서드에 의해 생성되면, popstate 이벤트의 state 속성은 히스토리 엔트리 state 객체의 복사본을 갖게 된다.
history.pushState() 또는 history.replaceState()는 popstate 이벤트를 발생시키지 않는 것에 유의한다.popstate 이벤트는 브라우저의 백 버튼이나 (history.back() 호출) 등을 통해서만 발생된다. 그리고 그 이벤트는 같은 document에서 두 히스토리 엔트리 간의 이동이 있을 때만 발생이 된다.
브라우저는 popstate 이벤트를 페이지 로딩시에 다르게 처리한다. Chrome(v34 이전버전) 와 Safari는 popstate 이벤트를 페이지 로딩시에 발생시킨다. 하지만 Firefox 는 그렇지 않다.
Syntax
window.onpopstate = funcRef;
- funcRef is a handler function.
The popstate event
예시를 보자, 다음의 코드를 실행하는 https://example.com/example.html 의 한 페이지는 주석에 쓰여있는 경고들을 발생시킨다.
window.onpopstate = function(event) {
alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
};
history.pushState({page: 1}, "title 1", "?page=1");
history.pushState({page: 2}, "title 2", "?page=2");
history.replaceState({page: 3}, "title 3", "?page=3");
history.back(); // alerts "location: https://example.com/example.html?page=1, state: {"page":1}"
history.back(); // alerts "location: https://example.com/example.html, state: null
history.go(2); // alerts "location: https://example.com/example.html?page=3, state: {"page":3}
원래의 히스토리 엔트리인 (https://example.com/example.html) 에 이와 연관된 state 객체가 없더라도, 두번째 history.back() API 호출 후 엔트리를 활성화 시키면 popstate 이벤트는 여전히 발생된다.