在使用window.history.pushState时，回退历史记录时页面不会重新加载。

Question

在使用window.history.pushState时，回退历史记录时页面不会重新加载。

6

当我使用window.history.pushState更改URL时，浏览器的历史回退按钮不能自动重新加载页面。为什么页面不能自动重新加载？我可以改变这种行为吗？

以下是一小段代码，用于示例此“问题”：

<html>
    <head>
        <title>Location test</title>
        <script>
            function load() {
                var value = window.location.search.substr(1);
                document.getElementById('myInput').value = value;
                document.title = 'Location test - ' + value;
            }
            function set(el) {
                window.history.pushState('', '', window.location.pathname + '?' + el.value);
                document.title = 'Location test - ' + el.value;
            }
        </script>
    </head>
    <body onload="load();">
        <input id="myInput" type="text" onkeyup="set(this);">
    </body>
</html>

只需在文本框中输入内容，浏览器历史记录将相应更新。单击浏览器历史记录的返回按钮不会刷新页面，您需要手动刷新。

我通过在网站上插入自己的“返回按钮”来解决了这个问题，它运行window.history.back(); location.reload();。但如果普通浏览器的“后退按钮”也能起作用，那我会很高兴。

- Daniel

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Craig.C · Accepted Answer

我认为这篇文章可能比我能做的更好地解释了这个话题。http://rosspenman.com/pushstate-jquery

popstate是关键。

我正在解决一个非常类似的问题。以下代码片段或其中的变体可能会有所帮助，虽然不一定美观。

    $(window).on("popstate", function(e) {
        if (e.originalEvent.state !== null) {
        location.reload()
        }
    });