popstate

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

BCD tables only load in the browser

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

hashchange