监听浏览器返回，pushState，popstate 事件，win…

在WebApp或浏览器中，会有点击返回、后退、上一页等按钮实现自己的关闭页面、调整到指定页面、确认离开页面或执行一些其它操作的需求。可以使用 popstate 事件进行监听返回、后退、上一页操作。

一、简单介绍 history 中的操作

　　1.window.history.back()，后退

　　2.window.history.forward()，前进

　　3.window.history.go(num)，前进或后退指定数量历史记录

　　4.window.history.pushState(state, title, utl)，在页面中创建一个 history 实体。直接添加到历史记录中。

　　　 参数：state：存储一个对象，可以添加相关信息，可以使用 history.state 读取其中的内容。

　　　　　　title：历史记录的标题（目前浏览器不支持）。

　　　　　　url：创建的历史记录的链接。进行历史记录操作时会跳转到该链接。

　　5.window.history.replaceState()，修改当前的 history 实体。

　　　　 参数：state：存储一个对象，可以添加相关信息，可以使用 history.state 读取其中的内容。

　　　　　　　title：历史记录的标题（目前浏览器不支持）。

　　　　　　　url：创建的历史记录的链接。进行历史记录操作时会跳转到该链接。

　　6.popstate 事件，history 实体改变时触发的事件。

　　7.window.history.state，会获得 history 实体中的 state 对象。

　　二、使用方法

　　　　取消默认的返回操作：

　　　　1.添加一条 history 实体作为替代原来的 history 实体

function pushHistory() {
//    第一个实体
    var state = {
        title: "index",
        url: "https://www.cnblogs.com/smallclown/"
    };
    window.history.pushState(state, "index", location.href);
// 第二个实体
    state = {
        title: "index",
        url: "https://www.cnblogs.com"
    };
    window.history.pushState(state, "index", location.href);
// 第三个实体  不要以为最后的空实体没有用  可以解决上来就执行popstate的问题 相当于炮灰
    tate = {
        title: "index",
        url:""
    };
    window.history.pushState(state, "index", "");
}

　　　　2.监听 popstate 事件

function addHandler() {
    pushHistory();
    window.addEventListener("popstate", function(e) {
                location.href = window.history.state.url;
            }
    });
    //或者
    window.onpopstate=function(e){
        location.href = window.history.state.url;
    }
}
addHandler();

　　PS:  每次返回都会消耗一个 history 实体，若用户选择取消离开，则需要继续 pushState 一个实体 ;

　　　　如果把地址换了一个你想去的地址,就形成了一个简单的网页劫持

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有