我创建了一个精巧的Javascript工具,以通过AJAX(包含所有功能的全局AjaxNav
对象)支持部分克隆站点中的内容加载。当然,我希望浏览器历史记录(后退和前进按钮)可以正常工作,因此我具有以下小功能:
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;
此函数被调用,不会产生任何错误(至少我无法发现);但是,当我尝试通过单击“后退”浏览器按钮或单击backspace
键返回时,只有可见的url发生了更改,但没有重新加载任何内容。我现在可以接受整页的重新加载,但是通过AJAX从历史记录中重新加载页面当然更好。
是否有明显的错误?
The whole thing有点长(当前约850行),因为通常无法知道目标URL是指定对象还是其查看方法;因此,我每个超链接最多尝试两个UR,然后进行处理(替换内容,设置标题,event.preventDefault()等),或简单地返回true
以加载整个页面。
您缺少popstate
事件侦听器。当popstate
将新的历史记录条目推送到集合时,单击后退按钮将pop历史记录集合中的状态。就像数组一样。 pushState
事件被设置为popstate
对象,并且可以访问您在window
功能中设置的state
对象。
提供有关pushState
对象在当前页面上应执行的操作的信息很有用。例如,要加载当前页面必须获取哪些数据。
请尝试下面代码中的代码段,然后查看输出结果。
state