使用带有 history.pushstate 和 popstate 的后退按钮时如何触发更改？

IT技术 javascript html back-button pushstate
2021-03-19 15:41:01

我几乎是 js 的新手，所以如果我错过了一些非常简单的东西，我很抱歉。

基本上，我已经做了一些研究使用history.pustate和popstate和我做了这么一个查询字符串添加到URL（结束?v=images）或（?v=profile）...（v使用意为“视图”）这：

var url = "?v=profile"
var stateObj = { path: url };
history.pushState(stateObj, "page 2", url);

我想这样做，以便我可以将内容加载到 div 中，但无需重新加载我使用该.load()函数完成的页面。

然后我使用了这个代码：

$(window).bind('popstate', function(event) {
    var state = event.originalEvent.state;

在$(document).ready()部分中，后来仅在<script>标签内进行了尝试，但都没有奏效。

我不知道如何制作它以便在我使用后退按钮时内容会发生变化，或者至少制作它以便我可以触发我自己的功能来这样做；我假设它与状态对象有关？！我似乎无法在网上找到任何可以清楚解释该过程的内容。

如果有人可以帮助我，那就太棒了，并提前感谢任何帮助我的人！

2个回答

popstate当有一个状态时，唯一包含一个状态。

当它变成这样：

  1. 初始页面加载
  2. 已加载新页面，并通过添加状态 pushState
  3. 后退按钮被按下

那么就没有状态，因为初始页面是定期加载的，而不是pushState. 其结果是，该onpopstate事件与烧制state的null。所以当它是时null，这意味着应该加载原始页面。

您可以实现它，以便history.pushState一致地调用它，并且您只需要提供这样的状态更改功能：单击此处获取 jsFiddle 链接

function change(state) {
    if(state === null) { // initial page
        $("div").text("Original");
    } else { // page added with pushState
        $("div").text(state.url);
    }
}

$(window).on("popstate", function(e) {
    change(e.originalEvent.state);
});

$("a").click(function(e) {
    e.preventDefault();
    history.pushState({ url: "/page2" }, "/page2", "page 2");
});

(function(original) { // overwrite history.pushState so that it also calls
                      // the change function when called
    history.pushState = function(state) {
        change(state);
        return original.apply(this, arguments);
    };
})(history.pushState);
非常感谢，这太完美了！
2021-04-29 15:41:01
你好，但是如果初始页面的数据是ajax从数据库动态生成的，怎么办？
2021-05-06 15:41:01
非常感谢您对@pimvdb 的帮助，更感谢您的超级快速回复。一切顺利。
2021-05-07 15:41:01

也许这不是最好的解决方案，也许它不适合您的需求。但对我来说，最好只是重新加载页面。所以页面是一致的，它根据当前的查询字符串加载所有内容。

$(document).ready(function() {
    $(window).on("popstate", function (e) {
        location.reload();
    });
});
其它你可能感兴趣的问题
上一篇ReactJS Bootstrap Navbar 和 Routing 不能一起工作 下一篇基于原型的面向对象与基于类的面向对象相比有哪些优势？