关于 onbeforeunload 和 onunload 事件手札

闲话少说,直奔主题。

Front

明人不说暗话,博主在这里直接就告诉你了,直接用 onbeforeunload 事件,不要用 onunload,看代码:

<script type="text/javascript">
  window.onbeforeunload = function (e) {
    console.log('coming...');
    // alert('coming...');
    var msg = '你确定要离开此页面吗?';
    e.returnValue = msg;
    return msg;
   }
</script>

以上代码我是用 console 进行测试,为什么这里用它而不是用 alert 呢?因为不管在 onbeforeunload 还是 unload 事件中, alert 都是不支持的。SO,没毛病老铁!

Why not onunload ?

这个问题问的好。
一句话总结:onunload 在 Opera、Firefox、Chrome 新版本中任何情况下都不会执行。
任何情况下之的是什么呢?即用户点击了浏览器的:

  • 后退
  • 前进
  • 刷新
  • 主页
  • 标签页
  • 关闭
  • 页面链接
  • 右键刷新
  • 右键前进、后退、返回

Why onbeforeunload ?

因为它骚啊!在 IE、Opera、FF、Chrome 中完美运行。而且实践证明是可行的,不光在 PC 端适用,在 H5 端也是可以的。

Club

有什么问题可以加我的QQ群:562522675 、378289676、322239039

Related link

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

相关阅读更多精彩内容

  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 8,924评论 1 11
  • 事件流 IE和Netscape开发团队提出了完全相反的两种事件流的概念,事件冒泡流和事件捕获流。 事件冒泡 事件由...
    exialym阅读 4,569评论 0 9
  • 本节介绍各种常见的浏览器事件。 鼠标事件 鼠标事件指与鼠标相关的事件,主要有以下一些。 click 事件,dblc...
    许先生__阅读 7,662评论 0 4
  • 一、JS前言 (1)认识JS 也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HT...
    凛0_0阅读 7,791评论 0 8
  • 之前写过一篇浏览器事件的相关操作和事件运行的原理——JavaScript浏览器事件解析。这一篇主要写一些常用的事件...
    faremax阅读 5,589评论 0 0

友情链接更多精彩内容