使用onbeforeunload阻止用户刷新

最新推荐文章于 2024-04-29 13:50:37 发布

weixin_33717117

最新推荐文章于 2024-04-29 13:50:37 发布

阅读量1.3k

点赞数

文章标签： javascript ViewUI

原文链接：https://segmentfault.com/a/1190000016806347

版权

1、onbeforeunload是什么玩意儿

onbeforeunload是一个事件，当页面将要被卸载（更新）的时候会被触发。
卸载（更新）讲的就是unload事件，当页面关闭后,会触发。

2、语法规则

window.onbeforeunload = funcRef

funcRef指的是一个方法，也就是一个函数引用。

3、怎么使用这个东西

3.1在HTML中,直接挂载到body上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body onbeforeunload="return test()">
     
</body>
<script type="text/javascript">
    function test(){
        return "你确定要离开吗";
    }
</script>
</html>

3.2在js中，使用window.onbeforeunload绑定方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
     
</body>
<script type="text/javascript">
window.onbeforeunload=function(){
    return "你确定要离开吗";
}
 
</script>
</html>

3.3在单页面中使用：

一般在项目中直接使用window或者body会导致整个项目的页面的刷新关闭事件都被拦截。
想在某个页面中使用这个拦截的大体思路是在进入这个页面的时候挂载该事件，跳转页面的时候将挂载的事件取消。
例如在react中：

componentDidMount() {
    window.onbeforeunload = function()
    {
      return "真的离开?";
    };
  }
componentWillUnmount(){
    window.onbeforeunload = function()
    {
      return null;
    }
  }

以上

weixin_33717117

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
使用onbeforeunload阻止用户刷新

1、onbeforeunload是什么玩意儿onbeforeunload是一个事件，当页面将要被卸载（更新）的时候会被触发。卸载（更新）讲的就是unload事件，当页面关闭后,会触发。2、语法规则window.onbeforeunload = funcReffuncRef指的是一个方法，也就是一个函数引用。3、怎么使用这个...
复制链接

扫一扫