Как определить, когда используются history.pushState и history.replaceState?

Question

Есть ли какое-то событие, на которое я могу подписаться, когда изменяется состояние истории? Как?

Answer 1

onpopstate событие должно быть уволен при смене истории, вы можете привязать к нему в своем коде, как это:

window.onpopstate = function (event) { 
    // do stuff here 
} 

Это событие также может быть уволен при загрузке страницы, вы можете определить, является ли событие был уволено из загрузки страницы, или с помощью PushState/replaceState путем проверки объекта события для государственной собственности, оно будет неопределенным, если событие было вызвано загрузкой страницы

window.onpopstate = function (event) { 
    if (event.state) { 
    // history changed because of pushState/replaceState 
    } else { 
    // history changed because of a page load 
    } 
} 

Там в настоящее время нет onpushstate события, к сожалению, , чтобы обойти это, вам нужно обернуть методы pushState и replaceState для реализации собственного события onpushstate.

У меня есть библиотека, которая упрощает работу с pushState, возможно, стоит проверить ее называться Davis.js, она обеспечивает простой api для работы с маршрутизацией на основе pushState.

Answer 2

Я использовал, чтобы использовать эту функцию, чтобы также быть уведомлен о том, когда pushState и replaceState называются:

// Add this: 
var _wr = function(type) { 
    var orig = history[type]; 
    return function() { 
     var rv = orig.apply(this, arguments); 
     var e = new Event(type); 
     e.arguments = arguments; 
     window.dispatchEvent(e); 
     return rv; 
    }; 
}; 
history.pushState = _wr('pushState'), history.replaceState = _wr('replaceState'); 

// Use it like this: 
window.addEventListener('replaceState', function(e) { 
    console.warn('THEY DID IT AGAIN!'); 
}); 

Это обычно излишеством, хотя. И это может не работать во всех браузерах. (Меня интересует только моя версия моего браузера.)

NB. Он также не работает в сценариях содержимого расширений Google Chrome, так как не разрешается изменять среду JS сайта. Вы можете обойти это, вставив <script> с указанным кодом, но это еще больше перебор.