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 propriedade 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 (window).
type Somente leitura DOMString The type of event.
bubbles Somente leitura Boolean Whether the event normally bubbles or not.
cancelable Somente leitura Boolean Whether the event is cancellable or not.
state Somente leitura any The current history entry's state object (if any).

Compatiblidade com navegadores

Estamos convertendo nossos dados de compatibilidade para o formato JSON. Esta tabela de compatibilidade ainda usa o formato antigo, pois ainda não convertemos os dados que ela contém. Descubra como você pode ajudar!

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

Última atualização por: mdnwebdocs-bot,