MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

Событие popstate вызывается, когда изменяется активная запись истории. Если изменение записи истории было вызвано методом history.pushState() или history.replaceState(), то состояние события popstate будет содержать state копии входящего в историю объекта

Note that just calling history.pushState() or history.replaceState() won't trigger a popstate event. The popstate event will be triggered by doing a browser action such as a click on the back or forward button (or calling history.back() or history.forward() in JavaScript).

Browsers tend to handle the popstate event differently on page load. Chrome (prior to v34) and Safari always emit a popstate event on page load, but Firefox doesn't.

General info

Specification
HTML5
Interface
PopStateEvent
Bubbles
Yes
Cancelable
No
Target
defaultView
Default Action
None

Properties

Свойство Тип Описание
target Только для чтения EventTarget The browsing context (<code>window</code>).
type Только для чтения DOMString Тип события.
bubbles Только для чтения Boolean Будет ли событие нормально бить
cancelable Только для чтения Boolean Отменяемо ли событие?
state Только для чтения any Объект state текущей записи истории (если есть).

Browser compatibility

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Да) (Да) 4.0 (2) 10.0 [3] (Да) (Да)[1]
Feature Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 3.0[2] (Да) 4.0 (2) 10.0 (Да) (Да)[1]

[1] The implementation has limited support.

[2] The implementation in Android 2.2 and 2.3 was buggy.

[3] IE & Edge do not fire the popstate event when the URL's hash value changes, see the bug report.

Example

A page at http://example.com/example.html running the following code will generate logs as indicated:

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}

Note that even though the original history entry (for http://example.com/example.html) has no state object associated with it, a popstate event is still fired when we activate that entry after the second call to history.back().

See Also

Метки документа и участники

 Внесли вклад в эту страницу: FlowerDeLuce
 Обновлялась последний раз: FlowerDeLuce,