javascript - 结合 window.history.pushState 返回历史记录时,页面不会重新加载

标签 javascript browser-history pushstate

当我使用 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();。但如果普通浏览器的“历史后退按钮”也能解决问题,我会很高兴。

最佳答案

我认为这可能比我更好地解释了这个主题。 http://rosspenman.com/pushstate-jquery

popstate 是关键

我正在处理一个非常相似的问题。不要认为它很漂亮,但以下片段或其变体可能会有所帮助

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

关于javascript - 结合 window.history.pushState 返回历史记录时,页面不会重新加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23429794/

相关文章:

javascript - 使用带 Angular 外部库

javascript - 使用 Selenium WebDriver 获取 JavaScript 提示框的值

browser - 我正在寻找有关互联网浏览器历史的出版物

model-view-controller - 可能是 Chrome 历史错误 - 执行 PRG,当再次导航到同一表单时 - 没有添加历史条目

backbone.js - 使主干的pushState在nginx的子路径中工作

ajax - 如何使用 hashbang url 处理 facebook 分享/点赞?

javascript - 根据表格宽度调整主容器宽度

javascript - 如何在 jQuery 上通过鼠标移动来放大和缩小屏幕的一部分?

firefox - Selenium:如何确保 back() 导航在不同站点上按预期工作?

ajax - IE历史推送状态