AJAX 导航 + window.history.pushState: "back" 浏览器按钮不起作用

Question

我创建了一个小工具 Javascript 来支持通过 AJAX 在 Plone 站点中部分加载内容（全局 AjaxNav object 包含所有功能）。当然，我希望浏览器历史记录（后退和前进按钮）起作用，所以我有以下小功能：

   var set_base_url = function (url) {  // important for local links (hash only)
        var head=null,
            base=$('html base').first();
        if (base) {
            base.attr('href', url);
            log('set base[href] to '+url);
        } else {
            $(document).add('<base>').attr('href', url);
            log('created <base> and set href to '+url);
        }

   var history_and_title = function (url, title, data) {
        var stateObj = {  // can be anything which is serializable, right?
            cnt: increased_state_counter()
            };
        if (typeof data.uid !== 'undefined') {
            stateObj['uid'] = data.uid;
        }
        if (title) {
            if (AjaxNav.options.development_mode) {
                title = '(AJAX) ' + title;
            }
            document.title = title;
        }
        if (url) {
            set_base_url(url);
            window.history.pushState(stateObj, '', url);
        } else {
            window.history.pushState(stateObj, '');
        }
    };
    AjaxNav.history_and_title = history_and_title;

这个函数被调用并且没有产生任何错误（none我至少可以发现）；但是当我尝试通过单击 "back" 浏览器按钮或按 backspace 键返回时，只有可见的 url 发生变化，但没有内容被重新加载。我暂时接受 full-page 重新加载，但当然通过 AJAX 重新加载历史页面会更好。

有没有明显的错误？

The whole thing 有点长（目前大约有 850 行），因为通常无法知道目标 URL 是否指定了 object 或其视图方法；因此我尝试每个超链接最多两个 UR，然后进行处理（替换内容、设置标题、event.preventDefault() 等），或者简单地 return true 加载整个页面。

Answer 1

您缺少 popstate 事件侦听器。当 pushState 将一个新的历史条目推送到集合中时，单击后退按钮将从历史集合中弹出一个状态。就像数组一样。 popstate 事件设置为 window 对象，并且可以访问您在 pushState 函数中设置的 state 对象。

向 state 对象提供有关它在当前页面上应该做什么的信息很有用。例如，您必须获取哪些数据才能加载当前页面。

在您的代码中尝试下面的代码片段，看看它会输出什么。

window.addEventListener('popstate', event => {
   const { state } = event;
   console.log(state);
});

AJAX 导航 + window.history.pushState: "back" 浏览器按钮不起作用

AJAX navigation + window.history.pushState: "back" browser button doesn't work

javascript

ajax

browser-history