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事件如果要发异步请求的话,需要后面给补一段同步代码阻塞一下,否则会在请求会发不出去的

  • 相关阅读:
    [原]音视频播放笔记
    [原]很多时候, 错误源于自己
    [原]找工作之tj
    [原]昨天碰到的一个诡异问题
    [原]硬盘分区规划
    [原]编程手记2008.08.26
    [原]编程手记2008.08.28
    eclipse 某些java文件乱码
    图片垂直居中,兼容ie6
    ul里不能直接嵌套div
  • 原文地址:https://www.cnblogs.com/amiezhang/p/11106305.html
Copyright © 2011-2022 走看看