HTML5历史记录 - 返回上一页的完整页面按钮？
[英]HTML5 History - Back button to previous full page?
问题描述
I'm using the HTML5 history API to modify the URL as certain product properties are selected (eg green car, blue car) to allow for deep-link sharing. 
我正在使用HTML5历史API来修改URL，因为选择了某些产品属性（例如绿色汽车，蓝色汽车）以允许深层链接共享。
However, this isn't a single page app, so I don't want to hijack the user's back button: if they press back, I want to allow them to go to the previous page, not the previous car color. 但是，这不是单页应用程序，所以我不想劫持用户的后退按钮：如果他们按下，我想让他们转到上一页，而不是之前的车颜色。
What is the best way to achieve this? 实现这一目标的最佳方法是什么？
Example history: 示例历史：
/page1
/page2
/page2?color=green
/page2?color=red
/page2?color=blue
Then press the browser's back button to go back to /page1 然后按浏览器的后退按钮返回/page1
2 个解决方案
解决方案1
4 已采纳 2016-05-13 19:50:04
Looks like I should have been using 看起来我应该一直在使用
history.replaceState();
instead of history.pushState(); 而不是history.pushState(); . 。 It replaces the browser's URL, but doesn't add to the history object, so the back button works as I want it to. 它取代了浏览器的URL，但没有添加到历史对象，因此后退按钮可以按我的意愿工作。
history.replaceState() operates exactly like history.pushState() except that replaceState() modifies the current history entry instead of creating a new one.
解决方案2
0 2016-05-13 20:07:11
Here's a solution using sessionStorage that gives your application the ability to go to a previously stored page, without breaking usability expectations/browser back button functionality. 这是一个使用sessionStorage的解决方案，它使您的应用程序能够转到以前存储的页面，而不会破坏可用性期望/浏览器后退按钮功能。 Moving to a previous URL (eg different color) is the expected result of using the back button on the browser for the user. 移动到先前的URL（例如，不同的颜色）是在浏览器上为用户使用后退按钮的预期结果。
JS JS
function getCurrentPath() {
return sessionStorage.getItem("currentPath");
}
function getPreviousPath() {
return sessionStorage.getItem("previousPath");
}
function setCurrentPath(path) {
var currentPath = getCurrentPath();
if (currentPath != path) {
sessionStorage.setItem("previousPath", currentPath);
sessionStorage.setItem("currentPath", path);
} else {
console.log('Path has not changed: ' + path);
}
}
function goToPrevious() {
var previousPath = getPreviousPath();
if (previousPath && previousPath != 'null') {
window.location.href = previousPath;
} else {
alert('Previous page is not defined.');
}
}
test1.html test1.html
<!DOCTYPE html>
<html>
<head>
<title>Test 1</title>
<meta charset="UTF-8">
<script src="test.js"></script>
<script>
setCurrentPath('test1.html');
console.log('Current Path:', getCurrentPath());
console.log('Previous Path:', getPreviousPath());
</script>
</head>
<body>
<button onclick="goToPrevious();">Go to previous page</button>
<a href="test2.html">Test 2</a>
<a href="?color=red">Red</a>
<a href="?color=green">Green</a>
<a href="?color=blue">Blue</a>
</body>
</html>
test2.html test2.html
<!DOCTYPE html>
<html>
<head>
<title>Test 2</title>
<meta charset="UTF-8">
<script src="test.js"></script>
<script>
setCurrentPath('test2.html');
console.log('Current Path:', getCurrentPath());
console.log('Previous Path:', getPreviousPath());
</script>
</head>
<body>
<button onclick="goToPrevious();">Go to previous page</button>
<a href="test1.html">Test 1</a>
<a href="?color=red">Red</a>
<a href="?color=green">Green</a>
<a href="?color=blue">Blue</a>
</body>
</html>
You can see that this allows the user to change query string parameters, but this does not affect your functionality for moving to a previous page through a forward action, simply by storing changes between paths. 您可以看到这允许用户更改查询字符串参数，但这不会影响通过转发操作移动到上一页的功能，只需在路径之间存储更改即可。 You could extend this by using an array rather than simply two values like I've done here, but I'll leave that up to implement, should you wish to do so. 您可以通过使用数组而不是像我在这里完成的两个值来扩展它，但如果您希望这样做，我会将其留下来实现。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.