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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
popstate event

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

Exemplo

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

js
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