onbeforeunload事件的使用

   <!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中测试过

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 一、JS前言 (1)认识JS 也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HT...
    凛0_0阅读 7,767评论 0 8
  • 本节介绍各种常见的浏览器事件。 鼠标事件 鼠标事件指与鼠标相关的事件,主要有以下一些。 click 事件,dblc...
    许先生__阅读 7,572评论 0 4
  • 之前写过一篇浏览器事件的相关操作和事件运行的原理——JavaScript浏览器事件解析。这一篇主要写一些常用的事件...
    faremax阅读 5,581评论 0 0
  • @转自GitHub 介绍js的基本数据类型。Undefined、Null、Boolean、Number、Strin...
    YT_Zou阅读 4,962评论 0 0
  • PNG 有PNG8和truecolor PNG PNG8类似GIF颜色上限为256,文件小,支持alpha透明度,...
    hudaren阅读 5,623评论 0 0

友情链接更多精彩内容