关闭浏览器弹出框onbeforeunload，onunload和onunloadcancel

 

前言

最近需要做一个阻挡用户关闭页面的功能，大概流程是当用户关闭页面，弹出“确定关闭提示”，点击“离开此页“关闭页面，点击“留在此页”关闭提示框。而当用户下次再关闭的时候不在给予提示。减少用户厌恶感。为了实现功能需要用到了onbeforeunload,onunload和onunloadcancel。 

简单说明图：

var text = "真的离开?"
window.onbeforeunload = function(){  
    return text;  
}  
window.onunload= function(){  
    return text;  
}  
window.onunloadcancel= function(){  
    console.log("留下来")
}  

 
 

onbeforeunload介绍

当窗口即将被关闭时,会触发该事件.此时页面正常能看见,且该事件的默认动作可以被取消。

window.onbeforeunload = function (e) {
  e = e || window.event;

  // 兼容IE8和Firefox 4之前的版本
  if (e) {
    e.returnValue = '关闭提示';
  }

  // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
  return '关闭提示';
};

ps： 
1.刷新页面算是离开页面，也会触发这效果，不过展示框不一样。 
2.chrome和firefox的新版本中“text”内容是不会显示的。但还是要填入，不填入firefox是不会显示关闭提示框。 
3.HTML5规范声明:在该事件的处理函数中调用下列弹窗相关的方法时,可以忽略不执行,window.showModalDialog(), window.alert(), window.confirm() window.prompt(). 
 

onunload介绍

当页面关闭后,会触发unload事件.

window.onunload = function（）{}

ps: 
如果您重载页面，也会触发 unload 事件（以及 onload 事件）。 
 

onunloadcancel介绍

当用户弹出页面关闭框，点击“留下此页”后触发的。

window.onunloadcancel= function（）{}

 

最终实现

因为要兼容各浏览器版本，且需要支持在关闭浏览器的时候 不会触发。所以修改了一下代码。如下：

扫描二维码关注公众号，回复： 3706300 查看本文章

function confirmClose(){
    let _t = null;
    let isShow  = true
    let _text = "只在IE上会显示提示";
    window.onbeforeunload = function(event) {
        _do(event);
    }

    window.onunload = function(event) {
        _do(event);
    }

    window.onunloadcancel = function() {
        clearTimeout(_t);
    }

    function _do(event){
        event = event || window.event;
        setTimeout(function() {
            _t = setTimeout(onunloadcancel, 0)
        }, 0);
        var browser = navigator.appName;
        if(event && isShow) {
            isShow = false;
            event.returnValue = _text;
        }
        if(isShow) {
            if(browser == "Netscape") {
                return _text;
            } else {
                window.event.returnValue = _text;
            }
        }
    }
}

confirmClose()//放置需要引用的地方