兼容火狐退回事件以及防抖的一些操作（前端）

最新推荐文章于 2022-08-09 18:57:06 发布

wweTHEUT

最新推荐文章于 2022-08-09 18:57:06 发布

阅读量399

点赞数

文章标签： js javascript 前端防抖劫持

本文链接：https://blog.csdn.net/wweTHEUT/article/details/115714164

版权

在处理页面关闭退回事件时，由于火狐不支持onunload事件，可以利用window.history接口结合window.onpopstate事件监听。防抖技术常用于前端，避免用户频繁操作导致的重复请求，通过函数闭包、setTimeout和clearTimeout实现，有效减轻后端负担。

摘要由CSDN通过智能技术生成

在页面关闭退回事件中，大家一般想到的是onunload事件，但这个事件很鸡肋，火狐浏览器是不支持的，那么该用什么好了？如果心细一点，则会看到一个叫做window.history接口。

这个接口可以获得浏览器历史浏览记录，并且可以通过go()或者back()或者forward()进行页面跳转，其中还提供两个重要操作方法即replaceState以及pushState对当前浏览记录堆栈进行

操作与修改。当然具备这一点，还不足以在退出页面时进行事件处理。我们还需要用到window.onpopstate事件进行监听。具体如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type = "button" id = "test" value="防抖" />
<script>
//hack实现在火狐浏览器中后退监听效果
var curUrl = window.location;
window.history.pushState({'test':1},"test1",curUrl);
window.onpopstate = function(e){
    alert("后退");
}

</script>
</body>
</html>

关于防抖，防抖主要用于在前端拦截住一定用户恶意操作，从而防止过多重复内容上传到后端，增加后端处理负担而设计的。关于防抖主要利用到函数闭包以及setTimeout和c

最低0.47元/天解锁文章

wweTHEUT

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
兼容火狐退回事件以及防抖的一些操作（前端）

在页面关闭退回事件中，大家一般想到的是onunload事件，但这个事件很鸡肋，火狐浏览器是不支持的，那么该用什么好了？如果心细一点，则会看到一个叫做window.history接口。这个接口可以获得浏览器历史浏览记录，并且可以通过go()或者back()或者forward()进行页面跳转，其中还提供两个重要操作方法即replaceState以及pushState对当前浏览记录堆栈进行操作与修改。当然具备这一点，还不足以在退出页面时进行事件处理。我们还需要用到window.onpopstate事件进行
复制链接

扫一扫