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 (window).
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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
popstate eventChrome Full support 5
Notes
Full support 5
Notes
Notes Chrome used to emit a popstate event on page load, but since version 34 no longer does.
Edge Full support 12Firefox Full support 4
Notes
Full support 4
Notes
Notes Firefox emits a popstate event on page load.
IE Full support 10Opera Full support 11.5Safari Full support 6
Notes
Full support 6
Notes
Notes Safari used to emit a popstate event on page load, but since version 10.0 no longer does.
WebView Android Full support YesChrome Android Full support 18
Notes
Full support 18
Notes
Notes Chrome used to emit a popstate event on page load, but since version 34 no longer does.
Edge Mobile ? Firefox Android Full support 4
Notes
Full support 4
Notes
Notes Firefox emits a popstate event on page load.
Opera Android Full support 11.5Safari iOS Full support 5.1
Notes
Full support 5.1
Notes
Notes Safari used to emit a popstate event on page load, but since version 10.0 no longer does.
Samsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.

Example

예시를 보자, 다음의 코드를 실행하는 http://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: http://example.com/example.html?page=1, state: {"page":1}"
history.back(); // Logs "location: http://example.com/example.html, state: null
history.go(2);  // Logs "location: http://example.com/example.html?page=3, state: {"page":3}

원래의 히스토리 엔트리인 (http://example.com/example.html) 에 이와 연관된 state 객체가 없더라도, 두번째 history.back() API 호출 후 엔트리를 활성화 시키면 popstate 이벤트는 여전히 발생된다.

See Also

문서 태그 및 공헌자

최종 변경자: alattalatta,