zoukankan      html  css  js  c++  java
  • 页面的beforeunload和unload的事件应用

    博主最近遇到一个需求,需要在用户离开之前给一个提示,是否确认离开,并且用户确认离开的话,需要发出一个请求

    下面直接上代码:

    <!DOCTYPE HTML>
    <html>
    
    <body>
        <script>
            // 只有屏幕和用户互动过后,用户离开页面(关闭、刷新、跳转其他页面)才会触发
            window.onbeforeunload = event => {
                console.log('onbeforeload!!!!!')
                if (event) {
                    event.returnValue = '关闭提示';
                }
            }
            // 不管有没有和用户互动过,只要用户离开页面(关闭、刷新、跳转其他页面)就会触发
            window.onunload = () => {
                console.log('onunload!!!!!')
                let xhr = new XMLHttpRequest();
                xhr.open('get', '/test', true)
                xhr.send()
                // 加一段同步代码阻塞一下,不然刷新会发不出去异步请求
                let now = new Date()
                while (new Date() - now < 100) { }
            }
        </script>
    </body>
    
    </html>

    值得主要的点:

    1.离开之前的提示无法自定义,只能是浏览器提供的文案,大概效果如下:

    2.unload事件如果要发异步请求的话,需要后面给补一段同步代码阻塞一下,否则会在请求会发不出去的

  • 相关阅读:
    linux c++ 实现http请求
    pip 换源
    Web API接口
    DRF框架知识总览
    jq+bs插件
    element-ui插件
    axios插件
    前端存储数据汇总
    Vuex插件
    全局配置css和js
  • 原文地址:https://www.cnblogs.com/amiezhang/p/11106305.html
Copyright © 2011-2022 走看看