使用onbeforeunload阻止用户刷新

aaron 发布于2019-08-23 12:32 / 3542人阅读

摘要：卸载更新讲的就是事件，当页面关闭后会触发。想在某个页面中使用这个拦截的大体思路是在进入这个页面的时候挂载该事件，跳转页面的时候将挂载的事件取消。

1、onbeforeunload是什么玩意儿

onbeforeunload是一个事件，当页面将要被卸载（更新）的时候会被触发。

卸载（更新）讲的就是unload事件，当页面关闭后,会触发。

2、语法规则

window.onbeforeunload = funcRef

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

3、怎么使用这个东西 3.1在HTML中,直接挂载到body上




    
    test

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




    
    test

3.3在单页面中使用：

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

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

以上

云服务器超融合服务器用户刷新 onbeforeunload 查看服务器用户使用使用ddos防护时用户可以设定

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98693.html

监听浏览器刷新及关闭

摘要：解决思路对于浏览器的关闭和刷新会触发两个事件和，问题在于如何区分用户是想刷新还是退出此时应该将用户催眠，然后获得用户的思想，预判用户走位及操作。。。事件是无法阻止页面关闭的。需求背景：为保证‘高度安全性’，用户每次退出页面或浏览器都要清除登陆信息，每次进入系统都要重新登陆（每次登陆还要手机验证码等乱七八糟的验证信息，，，求用户的心里阴影面积），但是刷新页面不可以清除登陆信息。解决思...

AWang 2019-08-26 13:57 评论0 收藏0
JS魔法堂:定义页面的Dispose方法——[before]unload事件启示录

摘要：坑无视和是十分特殊的事件，要求事件处理函数内部不能阻塞当前线程，而却恰恰就会阻塞当前线程，因此规范中以明确在和中直接无视这几个方法的调用。前言最近实施的同事报障，说用户审批流程后直接关闭浏览器，操作十余次后系统就报用户会话数超过上限，咨询4A同事后得知登陆后需要显式调用登出API才能清理4A端，否则必然会超出会话上限。即使在页面上增添一个登出按钮也无法保证用户不会直接关掉浏览器...

Chiclaim 2019-08-19 18:43 评论0 收藏0
DOM 事件详解

摘要：与此同时，我们获得了回调函数的句柄，从而可以随时从元素上移除相应的事件监听。对象会被作为第一个参数传递给事件监听的回调函数。 Click、touch、load、drag、change、input、error、risize — 这些都是冗长的DOM（文档对象模型）事件列表的一部分。事件可以在文档(Document)结构的任何部分被触发，触发者可以是用户操作，也可以是浏览器本身。事件并不是...

tianhang 2019-08-19 14:24 评论0 收藏0
JS基础篇--JS之onunload、onbeforeunload事件详解

摘要：事件事件在用户退出页面时发生。注意事件同样触发了页面载入事件事件。如图所示大体一句话描述和支持事件但是或者不支持该事件。浏览器兼容情况完美支持不支持文字提醒信息不支持如图所示使用遇到的凡是标签都会触发事件包括这种。简介 onunload，onbeforeunload都是在刷新或关闭时调用，可以在脚本中通过 window.onunload来调用。区别在于onbeforeunload在o...

rollback 2019-08-21 17:26 评论0 收藏0