Javascript AJAX导航&x2B；window.history.pushState:“文件”；“后退”；浏览器按钮不存在'；行不通

我创建了一个litte Javascript工具，支持通过AJAX（包含所有功能的全局

AjaxNav

对象）在Plone站点中部分加载内容。当然，我希望浏览器历史记录（后退和前进按钮）正常工作，因此我有以下小功能：

   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;

var set\u base\u url=函数（url）{//对本地链接很重要（仅限哈希）
var head=null，
base=$（'html base'）.first（）；
如果（基本）{
base.attr（'href'，url）；
log（'将base[href]设置为'+url'）；
}否则{
$（文档）.add（“”）.attr（'href'，url）；
日志（'创建并将href设置为'+url'）；
}
var history_和_title=函数（url、标题、数据）{
var stateObj={//可以是任何可序列化的对象，对吗？
cnt：增加的状态计数器（）
};
if（typeof data.uid！=“未定义”）{
stateObj['uid']=data.uid；
}
如果（标题）{
if（AjaxNav.options.development_模式）{
title='（AJAX）'+title；
}
document.title=标题；
}
如果（url）{
设置基本url（url）；
window.history.pushState（stateObj'，，url）；
}否则{
window.history.pushState（stateObj'，）；
}
};
AjaxNav.history_和_title=history_和_title；

此函数被调用，不会产生任何错误（至少我无法发现任何错误）；但是当我试图通过单击“返回”返回时浏览器按钮或点击

backspace

键，只有可见的url会更改，但不会重新加载任何内容。我现在接受重新加载整个页面，但当然，通过AJAX从历史中重新加载页面会更好

有没有明显的错误

有点长（目前大约850行），因为通常无法知道目标URL是否指定了对象或其查看方法；因此我尝试每个超链接最多两个UR，然后进行处理（替换内容、设置标题、event.preventDefault（）等），或者只需返回

true

即可加载整个页面。

您缺少事件侦听器。当

pushState

将新的历史记录条目推送到集合中时，单击“上一步”按钮将从历史记录集合中弹出一个状态。就像使用数组一样。

popstate

事件设置为

窗口

对象并且可以访问在

pushState

功能中设置的

state

对象

提供

状态

对象在当前页面上应该做什么的信息非常有用。例如，加载当前页面必须获取哪些数据

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

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

---

是的，我明白了。我得到的是我推到状态堆栈中的东西。我想象着一些浏览器魔法正在发生，但显然我需要自己实现它。