在 Opera 12 上异步 ajax 请求后更改历史记录

Change history after async ajax request on Opera 12

简介

在较旧版本的 Opera (Opera/9.80 (Macintosh; Intel Mac OS X 10.10.3) Presto/2.12.388 Version/12.16) 中,在 ajax 请求回调中更新 document.location.hash 时存在历史问题。

重现步骤:

代码:

// listen to hash changes
$(window).on('hashchange', function() {
  console.log("Updated hash: ", document.location.hash);
  console.log("history.length: ", history.length);
});
var updateHash = function(hash) {
  document.location.hash = hash;
};
// set the first route
updateHash('#start');

// do async request and change route
promise = $.get('http://beta.json-generator.com/api/json/get/PumsGq6');
promise.done(function() {
  updateHash('#done_async');
});

// wait for 5 seconds and change route
setTimeout(function() {
  updateHash('#complete_timeout');
}, 5000);
<!DOCTYPE html>
<html>

<head>
  <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <meta charset="utf-8">
  <title>History change</title>
</head>

<body>
  <a href="#page">set page</a>
</body>

</html>

Chrome 和 Firefox 的结果是什么:

Updated hash:  #start
history.length:  2
> XHR finished loading: GET "http://beta.json-generator.com/api/json/get/PumsGq6"
Updated hash:  #done_async
history.length:  3
Updated hash:  #complete_timeout
history.length:  4
Updated hash:  #page
history.length:  5

有什么问题 —> Opera 12:

Updated hash: , #start
history.length: , 2
Updated hash: , #done_async
history.length: , 2
Updated hash: , #complete_timeout
history.length: , 3
Updated hash: , #page
history.length: , 4

正如在异步请求后的控制台输出中所见,浏览器历史记录未更改,尽管url/hash已正确更新setTimeout 只是为了验证可以以非同步方式更改历史记录。

这导致了导航问题,因为我无法返回到历史记录中不存在的点。

虽然我对此没有完整的解释,但已通过使用 jQuery ^1.8.3.

解决了