浏览器回退事件

时间：2025-01-19 08:48:21

监听浏览器后退按钮实现翻页回退

监听浏览器回退事件

百度找了很多，资源比较少。

一、对浏览器回退事件监听

代码如下（示例）：

window.addEventListener("popstate", function(e) { 
alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能 
}, false);

二、创建一个本页的url

虽然我们监听到了后退事件，但是页面还是会返回上一个页面，所以我们需要使用pushState增加一个本页的url,代表本页

1.添加记录

代码如下（示例）：

function pushHistory() { 
var state = { 
title: "title", 
url: "#"
}; 
window.history.pushState(state, "title", "#"); 
}

2.整体代码

代码如下（示例）：

$(function(){ 
pushHistory(); 
window.addEventListener("popstate", function(e) { 
alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能 
}, false); 
function pushHistory() { 
var state = { 
title: "title", 
url: "#"
}; 
window.history.pushState(state, "title", "#"); 
} 
});

三、根据需求进行修改

1.在翻页时，进行对页数的保存

我们可以利用数组来进行对翻页的当前页数进行保存，我这里使用的是 bootstrapTable组件

//创建一个数组
var arr = [];
//初始页
arr.push(1);
$('#Table').on( '', function ( e, number, size ) {
    //定位第几页
    arr.push(number)
} );

2.在后退事件监听中进行页数跳转.

后退到第一次翻页记录的时候，返回至首页

//监听返回
    window.addEventListener("popstate", function (e) {
        if (arr.length==1){
            location.href='首页地址';
        }
        $('#Table').bootstrapTable('selectPage',arr[arr.length-2]);
        //除去最后一位数据两次，因为执行了翻页方法后又把当前页添加进了数组
        arr.pop();
        arr.pop();
    }, false);

这样就实现后退，返回上一次翻页记录。

总结

需要注意的地方，一定得给本页添加一个history的连接，不然的话不起作用。灵活运用可以实现不同的功能。

资料参考:/yangjing1314/p/

相关文章