onbeforeunload是什么？如何使用？

本篇文章给大家带来的内容是关于onbeforeunload是什么？如何使用？有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

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;
    }
  }

登录后复制

以上就是onbeforeunload是什么？如何使用？的详细内容，更多请关注Work网其它相关文章！