对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


原文地址:https://www.cnblogs.com/haigelang/p/7081872.html