MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

popstate

O evento popstate é disparado quando a entrada do histórico ativa é alterado. Se o histórico de entrada a ser ativado for criado por uma chamada history.pushState() ou for afetada por uma chamada history.replaceState(), a prorpiedade dos eventos popstate contém uma cópia do histórico de entrada do objeto.

Note  que apenas chamando history.pushState() ou history.replaceState() não ira disparar um evento popstate. O evento popstate apenas é disparado após uma ação no navegador como um click no botão de voltar (ou chamando history.back() por javascript)

Navegadores tendem a lidar com o evento popstate diferentemente no carregamento da página. Chrome (anterior versão 34) e Safari sempre emitem um evento popstate no carregamento da página, mas o Firefox não.

Informação geral

Especificação
HTML5
Interface
PopStateEvent
Bubbles
Yes
Cancelable
No
Alvo
defaultView
Ação padrão
None

Propriedades

Property Type Description
target Somente leitura EventTarget The browsing context (<code>window</code>).
type Somente leitura DOMString The type of event.
bubbles Somente leitura boolean Does the event normally bubble?
cancelable Somente leitura boolean Is it possible to cancel the event?
state Somente leitura any The current history entry's state object (if any).

Compatiblidade com navegadores

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Suporte básico (Yes) 4.0 (2) 10.0 (Yes) (Yes)[1]
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Suporte básico 3.0[2] 4.0 (2) 10.0 (Yes) (Yes)[1]

[1] A implementação tem um suporte limitado.

[2] A implementação em Android 2.2 e 2.3 tem problemas.

Exemplo

Um página no http://example.com/example.html roda o código abaixo e irá gerar os logs indicados

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}

Observe que mesmo que a entrada do histórico inicial(para http://example.com/example.html) não tem nenhum estado associado a ele, um evento popstate é ainda disparado quando nós ativamos essa entrada após a segunda chamada para history.back ().
 

Eventos relacionados

Etiquetas do documento e colaboradores

 Colaboradores desta página: brunoeduardo
 Última atualização por: brunoeduardo,