对pushState、replaceState和onpopstate一点使用
应用场景:实现点击浏览器前进和回退按钮importPage,checkPage div区块的切换
关键代码:
新建tab页,将页面url粘贴到地址拦,刷新页面,此时历史栈数为2,当前onpopstate事件回调,返回e.state为null,先替换栈里的当前页,浏览器显示checkPage页面,栈里当前页也为checkPage。
window.history.replaceState({
wid: 'checkPage'
}, document.title);
点击按钮,向历史栈里添加页面。
var registerBackPage = function (wid) {
window.history.pushState({
wid: wid
}, document.title);
}
window.addEventListener("popstate", function (t) {
var wid = "";
if (t.state && t.state.wid) {
wid = t.state.wid;
} else {
return
}
switchPage($('#' + wid));
})
$("#importPageBtn").click(function () {
registerBackPage('importPage');
switchPage($('#importPage'));
});
参考链接:http://www.cnblogs.com/lyzg/p/5960609.html