拦截用户刷新或离开页面

通过 Page Visibility API

document.addEventListener('visibilitychange', function () {//  visible => 用户打开或回到当前页面  hidden => 用户离开当前页面console.log(document.visibilityState); //  'visible' or 'hidden'
});

通过 beforeunload

在页面卸载前可以通过它弹出窗口，来取消卸载并继续使用原有页面。

为了显示弹出窗，必须将 event.returnValue 的值设置为要显示给用户的字符串（对IE及FireFox而言），同时作为函数的值返回（对Safari和Chrome而言）。Opera 11 及其之前的版本不支持

 EventUtil.addHandler(window,"beforeunload",function(event){event = EventUtil.getEvent(event);const msg = "确定要离开吗？";event.returnValue = msg; return msg;})

跨浏览器的事件对象

代码来自 https://www.cnblogs.com/hykun/p/EventUtil.html

var EventUtil={addHandler:function(element,type,handler){ //添加事件if(element.addEventListener){ element.addEventListener(type,handler,false);  //使用DOM2级方法添加事件}else if(element.attachEvent){                    //使用IE方法添加事件element.attachEvent("on"+type,handler);}else{element["on"+type]=handler;          //使用DOM0级方法添加事件}},  removeHandler:function(element,type,handler){  //取消事件if(element.removeEventListener){element.removeEventListener(type,handler,false);}else if(element.detachEvent){element.detachEvent("on"+type,handler);}else{element["on"+type]=null;}},getEvent:function(event){  //使用这个方法跨浏览器取得event对象return event?event:window.event;},getTarget:function(event){  //返回事件的实际目标return event.target||event.srcElement;},preventDefault:function(event){   //阻止事件的默认行为if(event.preventDefault){event.preventDefault(); }else{event.returnValue=false;}},stopPropagation:function(event){  //立即停止事件在DOM中的传播//避免触发注册在document.body上面的事件处理程序if(event.stopPropagation){event.stopPropagation();}else{event.cancelBubble=true;}},getRelatedTarget:function(event){  //获取mouseover和mouseout相关元素if(event.relatedTarget){return event.relatedTarget;}else if(event.toElement){      //兼容IE8-return event.toElement;}else if(event.formElement){return event.formElement;}else{return null;}},getButton:function(event){    //获取mousedown或mouseup按下或释放的按钮是鼠标中的哪一个if(document.implementation.hasFeature("MouseEvents","2.0")){return event.button;}else{switch(event.button){   //将IE模型下的button属性映射为DOM模型下的button属性case 0:case 1:case 3:case 5:case 7:return 0;  //按下的是鼠标主按钮（一般是左键）case 2:case 6:return 2;  //按下的是中间的鼠标按钮case 4:return 1;  //鼠标次按钮（一般是右键）}}},getWheelDelta:function(event){ //获取表示鼠标滚轮滚动方向的数值if(event.wheelDelta){return event.wheelDelta;}else{return -event.detail*40;}},getCharCode:function(event){   //以跨浏览器取得相同的字符编码，需在keypress事件中使用if(typeof event.charCode=="number"){return event.charCode;}else{return event.keyCode;}}};

拦截用户刷新或离开页面相关推荐

react离开页面，自定义弹框拦截，路由拦截
前言: 项目有个需求是:跳转路由,在离开页面前,需要弹框询问用户是否确定离开. 用react-router的<Prompt>组件是可以的,但是,怎么使用antd组件(或者说自定义组件)呢? ...
js捕捉IE窗口失去焦点事件,判断离开页面刷新或关闭的方法
js捕捉IE窗口失去焦点事件,判断离开页面刷新或关闭的方法 javascript如何捕捉IE窗口失去焦点事件 window.onblur = function(e) { //you code }; 弹 ...
REACT HOOKS实现离开页面、刷新页面的时候，强制提醒
REACT HOOKS实现离开页面.刷新页面的时候,强制提醒工作中遇到这个需求,网上对于HOOKS实效这个效果的文章很少,所以记录一下.其实很简单,几行代码就可以实现了. function befo ...
html离开页面时,js实现用户离开页面前提示是否离开此页面的方法（包括浏
本文实例讲述了js实现用户离开页面前提示是否离开此页面的方法(包括浏览器按钮事件).分享给大家供大家参考.具体如下: 用户离开页面前,提示是否离开此页面(包括浏览器按钮事件) 如果在退出页面时需要弹出 ...
vue判断离开当前页面_js监听用户进入和离开当前页面
VisibilityChange 事件:用于用户是否离开当前页面 // 页面的 visibilityState属性可能返回三种状态 prerender,visible 和 hidden // 监听 v ...
php离开界面监听,js实现用户离开页面前提示是否离开此页面的方法（包括浏览器按钮事件）...
本文实例讲述了js实现用户离开页面前提示是否离开此页面的方法(包括浏览器按钮事件).分享给大家供大家参考.具体如下: 用户离开页面前,提示是否离开此页面(包括浏览器按钮事件) window.onbef ...
ajax离开页面方法,如果用户在页面加载完成之前离开页面，则触发jQuery ajaxError（）处理程序...
我们使用jQuery的全局ajaxError()处理函数来警告用户任何AJAX失败: $(document).ajaxError(function() { $("There was a ne ...
vue离开当前路由销毁当前路由_VUE 离开页面路由拦截
业务场景在页面内容被编辑后,用户跳转其他路由,需要提示用户:当前页面有改动,确认离开后再进行跳转,以防编辑数据丢失. 代码 beforeRouteLeave (to, from, next) { t ...
如何防止用户修改html提交,当用户刷新页面时，HTML表单被重新提交 - 我如何阻止这种情况发生？...
当用户提交一个html表单(method ="post")后,它将它们带回到它们所在的页面(但其中一些数据已更改).如果用户刷新页面,则再次提交表单.在我的应用程序中,这可能会创建 ...

拦截用户刷新或离开页面

通过 Page Visibility API

通过 beforeunload

拦截用户刷新或离开页面相关推荐

最新文章

热门文章