对pushState、replaceState和onpopstate一点使用

最新推荐文章于 2022-08-30 21:58:47 发布

weixin_34090562

最新推荐文章于 2022-08-30 21:58:47 发布

阅读量114

点赞数

原文链接：http://www.cnblogs.com/haigelang/p/7081872.html

版权

应用场景：实现点击浏览器前进和回退按钮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