javascript - 将后退按钮与 history.pushstate 和 popstate 一起使用时如何触发更改？

Question

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

基本上，我对 history.pustate 和 popstate 的使用做了一些研究，我已经做到了，所以在 url 的末尾添加了一个查询字符串 ( ?v=images ) 或 ( ?v=profile ).. .(v 意思是“ View ”)通过使用这个:

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> 内尝试过标签，但都没有用。

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

如果有人能帮助我，那就太好了，在此先感谢所有帮助我的人!

Answer 1

popstate 只包含一个状态。

当它变成这样时:

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

然后没有状态，因为初始页面是定期加载的，而不是 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);