考慮以下幾點:
var originalPath = window.location.pathname.toString();
history.pushState({ value: 'Foo' }, '', 'state-1');
history.pushState({ value: 'Bar' }, '', 'state-2');
history.pushState({ value: 'Baz' }, '', 'state-3');
history.back();
history.back();
console.log(history.state.value);
//So we can hit refresh and see the results again...
setTimeout(function() {
history.replaceState(null, '', originalPath);
}, 250);
人們期望這個代碼塊返回「富」 - 在Firefox和我的IE鴨拳,這正是它 - 但是在Chrome中,它迴應'巴茲'。
經過一番調查,我發現問題:IE和Firefox同步更新歷史記錄,然後在需要加載任何頁面的情況下進行異步。 Chrome似乎立即發生異步。
證據:
window.onpopstate = function() {
console.log('ping');
}
history.pushState({ value: 'Foo' }, '', 'state-1');
history.back();
console.log('pong');
在Firefox中,這將返回 '平'; 'pong' - 表示該事件作爲history.back()調用的一部分進行調度。在Chrome中,這返回'pong'; 'ping' - 表示該事件被放入隊列中用於分派。
如果這個事件調度模型沒有被用來管理歷史和位置對象的狀態 - 但顯然是這樣的,這並不會那麼糟糕。
window.onpopstate = function() {
console.log('Event...', history.state, window.location.pathname.toString());
}
history.pushState({ value: 'Foo' }, '', 'state-1');
history.back();
console.log('Inline...', history.state, window.location.pathname.toString());
這是一個有趣的怪癖,需要使用jQuery延期鏈來解決我的單元測試問題。我對此並不特別高興,但你能做什麼?