현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.
popstate 이벤트는 활성화된 히스토리 엔트리가 변경될 때 발생됩니다. 만약 활성화된 엔트리가 history.pushState() 메서드나 history.replaceState() 메서드에 의해 생성되면, popstate 이벤트의 state 속성은 히스토리 엔트리 state 객체의 복사본을 갖게 됩니다.
history.pushState() 또는 history.replaceState()는 popstate 이벤트를 발생시키지 않는 것에 유의합니다.popstate 이벤트는 브라우저의 백 버튼이나 (history.back() 호출) 등을 통해서만 발생된다.
브라우저는 popstate 이벤트를 페이지 로딩시에 다르게 처리합니다. Chrome(v34 이전버전) 와 Safari는 popstate 이벤트를 페이지 로딩시에 발생시킵니다. 하지만 Firefox 는 그렇지 않습니다.
General info
- Specification
- HTML5
- Interface
- PopStateEvent
- Bubbles
- Yes
- Cancelable
- No
- Target
- defaultView
- Default Action
- None
Properties
| Property | Type | Description |
|---|---|---|
target Read only |
EventTarget |
The browsing context (<code>window</code>). |
type Read only |
DOMString |
The type of event. |
bubbles Read only |
Boolean |
Whether the event normally bubbles or not |
cancelable Read only |
Boolean |
Whether the event is cancellable or not? |
state Read only |
any | The current history entry's state object (if any). |
Browser compatibility
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | (Yes) | 4.0 (2) | 10.0 [3] | (Yes) | (Yes)[1] |
| Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | 3.0[2] | 4.0 (2) | 10.0 | (Yes) | (Yes)[1] |
[1] The implementation has limited support.
[2] The implementation in Android 2.2 and 2.3 was buggy.
[3] IE & Edge do not fire the popstate event when the URL's hash value changes, see the bug report.
Example
예시를 보자, 다음의 코드를 실행하는 https://example.com/example.html 의 한 페이지는 주석에 쓰여있는 경고들을 발생시킨다.
window.onpopstate = function(event) {
console.log("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(); // Logs "location: https://example.com/example.html?page=1, state: {"page":1}"
history.back(); // Logs "location: https://example.com/example.html, state: null
history.go(2); // Logs "location: https://example.com/example.html?page=3, state: {"page":3}
원래의 히스토리 엔트리인 (https://example.com/example.html) 에 이와 연관된 state 객체가 없더라도, 두번째 history.back() API 호출 후 엔트리를 활성화 시키면 popstate 이벤트는 여전히 발생된다.