简介

Question

简介

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

重现步骤：

收听hashchange并记录document.location.hash和history.length
更改document.location.hash
创建对json的GET请求
处理GET ajax响应并更改document.location.hash
等待5秒钟并更改document.location.hash
点击页面上更改document.location.hash

代码：

＆＃13;

// 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);

＆＃13;

<!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>

＆＃13;

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

问题是什么 - ＆gt; 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只是为了验证可以以非同步的方式更改历史记录。

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

Answer 1

虽然我没有完整的解释，但它是通过使用jQuery ^ 1.8.3解决的。

在Opera 12

简介

重现步骤：

代码：

Chrome和Firefox的结果是什么：

问题是什么 - ＆gt; Opera 12：

1 个答案: