在 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 时存在历史问题。
重现步骤:
- 收听
hashchange
并记录 document.location.hash
和 history.length
- 改变
document.location.hash
- 创建对 json
的 GET 请求
- 处理 GET ajax 响应并更改
document.location.hash
- 等待 5 秒,然后更改
document.location.hash
- 点击页面上的link会发生变化
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.
解决了
简介
在较旧版本的 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
- 点击页面上的link会发生变化
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.
解决了