logo标签列表

HTML5历史记录 - 如何使用后退按钮回到上一个完整页面？

javascripthtmlhtml5-history
3

我正在使用HTML5历史记录API来在选择某些产品属性（例如绿色汽车，蓝色汽车）时修改URL，以便进行深度链接共享。

然而，这不是一个单页应用程序，因此我不想劫持用户的返回按钮：如果他们按下返回键，我希望允许他们返回到上一页，而不是上一个汽车颜色。

如何实现最佳效果？

历史记录示例：

/page1
/page2
/page2?color=green
/page2?color=red
/page2?color=blue

然后按浏览器的返回按钮回到/page1页面。
不要使用“返回”按钮。只需向最后一页进行前进操作。您可以使用sessionStorage或localStorage存储最后访问的页面，并在每个页面中检查更改。 - ManoDestra
我喜欢这个想法，但正如我在问题中提到的那样，我希望人们能够使用他们浏览器的后退按钮（或Android的后退导航按钮）返回到上一页。这是我可以通过JS接管的吗？ - Anthony F.
不，而且即使你能够这样做，也不应该这样做。这将破坏浏览器的后退按钮功能和用户的期望。如果您想给他们一个返回上一页的选项，那么可以公开显示该选项，但是您不能使用这种可能具有恶意的脚本来破坏浏览器功能。 - ManoDestra
对，没错。很遗憾，你提出的解决方案对我来说不起作用。还是谢谢你！ - Anthony F.
您可以通过在页面上添加一个按钮/链接来为应用程序提供浏览器中的此功能，使用类似于我上面建议的技术，但不能破坏返回按钮的功能。 - ManoDestra
2个回答
5

看起来我应该使用

history.replaceState();

与其使用history.pushState();，不如使用history.replaceState()。它替换了浏览器的URL，但不会添加到历史记录对象中，因此后退按钮可以按照我想要的方式工作。

history.replaceState()与history.pushState()完全相同，只是replaceState()修改当前历史记录条目而不是创建新条目。

developer.mozilla.org

0
这是一个使用sessionStorage的解决方案，可以使您的应用程序具备访问先前存储的页面的功能，而不会破坏可用性期望/浏览器后退按钮功能。对用户来说，使用浏览器的后退按钮导航到以前的URL（例如，不同颜色）是预期结果。

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

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

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

你可以看到，这允许用户更改查询字符串参数，但这不会影响您通过前进操作移动到上一页的功能，只需在路径之间存储更改即可。您可以通过使用数组而不仅仅是像我这里所做的两个值来扩展此功能，但如果您希望这样做，我将把它留给您自己实现。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接