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

Compatiblidade com navegadores

[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 https://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: 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}

Observe que mesmo que a entrada do histórico inicial(para https://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

• hashchange