利用popstate事件和window下的history对象处理浏览器跳转问题

太过爱你忘了你带给我的痛 2022-10-02 14:56 174阅读 0赞

# 利用popstate事件和window下的history对象处理浏览器跳转问题 #

#### 引子 ####

之前，偶尔在项目中用过history接口做返回上一页功能，当时是用的history.go(-1)，前几天面试中遇到一个控制浏览器跳转的问题时有点懵，特意查了文档记录一下，并且列出一些目前能想到的应用：

#### popstate事件 ####

[文档地址][Link 1]

> 当活动历史记录条目更改时，将触发popstate事件。如果被激活的历史记录条目是通过对history.pushState（）的调用创建的，或者受到对history.replaceState（）的调用的影响，popstate事件的state属性包含历史条目的状态对象的副本。

就我目前的认识来看，无论是浏览器的前进还是后退都会触发这个popstate事件，所以只能起到一个监听页面变化的作用。

#### History 接口 ####

*  属性
    
     *  History.length 表示历史会话中元素的数目
     *  History.scrollRestoration 允许Web应用程序在历史导航上显式地设置默认滚动恢复行为。此属性可以是自动的（auto）或者手动的（manual）。
     *  History.state 返回一个表示历史堆栈顶部的状态的值。这是一种可以不必等待popstate 事件而查看状态而的方式。
 *  方法
    
     *  History.back()
        
        > 等同于history.go(-1)
     *  History.forward()
        
        > 等同于historygo(1)
     *  History.go()
        
        > 这个方法中如果参数超出范围或者不对就不会起效果
     *  History.pushState()
        
        > pushState() 带有三个参数：一个状态对象，一个标题（现在被忽略了），以及一个可选的URL地址。下面将对这三个参数进行细致的检查
    
        function pushHistory() { var state = { title: "title", url: "#" }; window.history.pushState(state, "title", "#xx"); }
    
    其他方法就不一一列举了，感兴趣的看[文档][Link 2]
    
    #### 监听浏览器返回按钮 ####
    
        function pushHistory() { var state = { title: "title", url: "#" }; window.history.pushState(state, "title", "#xx"); } pushHistory(); window.addEventListener("popstate", function(e) { console.log(e); alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能 }, false);
    
    这个地方就监听了浏览器的返回事件，但我有个疑问，如果不先pushState一个地址就监听不到，直接跳转了，这个暂时没搞懂，有知道的小伙伴可以留言讨论一下。
    
    #### 禁止返回上一页的一种方案 ####
    
        history.pushState(null, null, document.URL); window.addEventListener("popstate",function(e) { console.log(e); history.pushState(null, null, document.URL); }, false);
    
    这个其实就是利用pushState向浏览历史列表中插入当前页面，在点击后退前和点击时都插入一次，那样无论点前进还是后退永远都会留在这个页面了

转载：忘记地址了

转载于:https://www.cnblogs.com/Alitar/p/10931689.html

[Link 1]: https://developer.mozilla.org/zh-CN/docs/Web/Events/popstate
[Link 2]: https://developer.mozilla.org/zh-CN/docs/Web/API/History