Question

对于js来说，我几乎是个新手，所以如果我遗漏了一些非常简单的东西，我很抱歉。

基本上，我已经做了一些关于使用history.pustate和popstate的研究，我已经做了，所以查询字符串被添加到url的末尾（?v=images）或（{{1} }）...（?v=profile含义'view'）使用：

我想这样做，所以我可以将内容加载到div中但不重新加载我使用var url = "?v=profile" var stateObj = { path: url }; history.pushState(stateObj, "page 2", url);函数完成的页面。

然后我使用了这段代码：

.load()

在$(window).bind('popstate', function(event) { var state = event.originalEvent.state;部分，之后仅在$(document).ready()个标签内尝试过，但都没有效果。

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

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

Answer 1

popstate只包含一个状态。

如果是这样的话：

初始页面已加载
已加载新页面，状态通过pushState
按下后退按钮

然后没有状态，因为初始页面是定期加载的，而不是pushState。因此，使用onpopstate state触发null事件。所以当它是null时，就意味着应该加载原始页面。

您可以实现它，以便始终如一地调用history.pushState，您只需要提供如下状态更改函数：Click here for jsFiddle link

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);

Answer 2

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

$(document).ready(function() {
    $(window).on("popstate", function (e) {
        location.reload();
    });
});

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

2 个答案: