首页 > web前端 > js教程 > 正文

onbeforeunload是什么?如何使用?

不言
发布: 2018-10-26 15:41:53
转载
3143 人浏览过

本篇文章给大家带来的内容是关于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是什么?如何使用?的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:segmentfault.com
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板