美文网首页
浏览器关闭时弹框提醒

浏览器关闭时弹框提醒

作者: 爱和圣殿 | 来源:发表于2018-05-04 20:00 被阅读0次

    在开发web应用时,有些页面在用户关闭时可能需要保存用户的数据,或者提示用户防止误关

    beforeunload 事件

    在浏览器中我们可以监听beforeunload事件来知道浏览器即将关闭,并且可以通过给Event对象的returnValue赋值来提示弹框

    
    window.addEventListener("beforeunload", e => {
        e.returnValue = true
    })
    
    

    然后我们刷新浏览器或者退出浏览器就可以看到弹框了

    image image

    用处

    通过监听到这个事件,我们就有机会在页面关闭前执行一段JS,来保存应用相关的数据

    
    window.addEventListener("beforeunload", e => {
        //do some things
    })
    
    

    只要是同步的JS就可以完全执行,如果需要异步回调,考虑到用户可能不会留下,所以异步操作不能完全保证

    同时JS不能占用太多时间,比如你用一个超大循环在哪卡之类的,浏览器如果检测到JS在一段时间内并没有正确执行,将会直接关闭页面

    参考资料

    window.onbeforeunload

    END

    2017-03-10 完成

    2017-12-02 立项

    相关文章

      网友评论

          本文标题:浏览器关闭时弹框提醒

          本文链接:https://www.haomeiwen.com/subject/bzrjrftx.html