onbeforeunload事件的使用

作者: 小遁哥 | 来源:发表于2019-02-15 16:13 被阅读2次
       <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <meta http-equiv="X-UA-Compatible" content="ie=edge" />
            <title>Document</title>
            <script>
            window.onbeforeunload = function() {
                return '你确定要离开吗?';
            };
            </script>
        </head>
        <a href="www.baidu.com">百度</a>
        </html>
    

    onbeforeunload用于页面在刷新、关闭、跳转时提醒用户。

    只要return返回不是null、undefined,就会触发默认行为,因此,可以在这里加入条件判断,优化用户体验。

    alert、confirm这些在这里没用。

    上述代码时触发beforeunload的基本例子,不过在不同的浏览器中触发方式不一样。

    Chrome71 中,需要至少点击一下视口刷新时才可触发
    image.png

    而且不会在乎你返回的内容,是浏览器自定义的。

    IE11中会显示return 返回的内容,不必点击视口即可在刷新时触发。

    补充

     window.addEventListener("beforeunload", this.onLevaeConfirm);
    

    以上方式无效,Chrome71和Edge17中测试过

    相关文章

      网友评论

        本文标题:onbeforeunload事件的使用

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