beforeunload event 当浏览器窗口关闭或者刷新时触发

2020-11-26 11:02:24

我再删除localStorage的时候，显示删除成功了，刷新后发信又出现了，并且还是原来的，我就想肯定是关闭的时候，浏览器又触发了存储变量到localStorage


找了半天，发现 

window.addEventListener('beforeunload', ()

就是检测浏览器窗口关闭和刷新的，还以为是检测上传图片呢。哎

下面介绍下beforeunload


参考地址 Window: beforeunload event


当浏览器窗口关闭或者刷新时，会触发beforeunload事件。当前页面不会直接关闭，可以点击确定按钮关闭或刷新，也可以取消关闭或刷新。

BubblesNo
CancelableYes
InterfaceEvent
Event handler propertyonbeforeunload

事件使网页能够触发一个确认对话框，询问用户是否真的要离开该页面。如果用户确认，浏览器将导航到新页面，否则导航将会取消。

根据规范，要显示确认对话框，事件处理程序需要在事件上调用preventDefault()。

但是请注意，并非所有浏览器都支持此方法，而有些浏览器需要事件处理程序实现两个遗留方法中的一个作为代替：

  • 将字符串分配给事件的returnValue属性

  • 从事件处理程序返回一个字符串。

某些浏览器过去在确认对话框中显示返回的字符串，从而使事件处理程序能够向用户显示自定义消息。但是，此方法已被弃用，并且在大多数浏览器中不再支持。

为避免意外弹出窗口，除非页面已与之交互，否则浏览器可能不会显示在beforeunload事件中创建的提示，甚至根本不会显示它们。

将事件处理程序/监听器加到window或 document的beforeunload事件后，将阻止浏览器使用内存中的页面导航缓存，例如Firefox的Back-Forward缓存或WebKit的Page Cache。

HTML规范指出在此事件中调用window.alert()，window.confirm()以及window.prompt()方法，可能会失效。更多详细信息，请参见HTML规范。

示例

HTML规范指出作者应该使用 Event.preventDefault() 而非 Event.returnValue，然而，不是所有浏览器都支持这么做。

window.addEventListener('beforeunload', (event) => {   // Cancel the event as stated by the standard.   event.preventDefault();   // Chrome requires returnValue to be set.   event.returnValue = ''; });

规范

规范状态注释
HTML Living Standard
beforeunload		Living Standard
HTML5
beforeunload		RecommendationInitial definition

浏览器兼容性

Update compatibility data on GitHub


DesktopMobile

ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
beforeunload eventFull support1Full support12Full support1Full support4Full support12Full support3Full support1Full support18Full support4Full support12Full support1Full support1.0
Custom text supportDeprecatedNon-standardNo support? — 51No supportNoNo support? — 44Full supportYesNo support? — 38No support? — 9No support? — 51No support? — 51No support? — 44No support? — 41No supportNoNo support? — 5.0
Activation using event.returnValue = "string";DeprecatedFull support30Full support12Full supportYesFull supportYes??Full supportYesFull supportYesFull supportYesFull supportYesNo supportNoFull supportYes
Activation using event.preventDefault()No supportNoNo support12 — 79Full supportYesFull support9No supportNoFull support11No supportNoNo supportNoFull supportYesNo supportNoNo supportNoNo supportNo
Activation using return "string";DeprecatedFull support1Full support12Full support1Full supportYesFull support12Full support3Full supportYesFull supportYesFull supportYesFull supportYesNo supportNoFull supportYes

What are we missing?

Legend

  • Full support 

  • Full support

  • No support 

  • No support

  • Compatibility unknown 

  • Compatibility unknown

  • Non-standard. Expect poor cross-browser support.

  • Non-standard. Expect poor cross-browser support.

  • Deprecated. Not for use in new websites.

  • Deprecated. Not for use in new websites.


  • 精彩推荐

  • 2020-04-17 11:28:57

    TweenMax中文初级教程三

    动画关键词：CSS（一般可以省略） CSSPlugin用于在TweenMax中对DOM元素的CSS相关属性进行动画 在CSSPlugin中CSS属性需要写成驼峰式，例如font-size应当写作fontSize。有时候你可以在一些默认px为单位的属性中省略单位，CSSPlugin还可以在不同的单位间做动画：

  • 2020-04-17 11:29:23

    TweenMax中文初级教程四

    用于滚动窗口（类似于window.scrollTo(x, y)）或DOM元素（如myDiv.scrollTop = y; myDiv.scrollLeft = x;）。滚动窗口时使用window作为动画目标。

  • 2020-04-17 14:06:29

    图片解释EaseIn，EaseOut，EaseInOut

    1.EaseIn：即缓动发生在入口处，也就是刚开始的时候。 2.EaseOut：即缓动发生在出口处，也就是结束之前。 3.EaseInOut：就是两边都有缓动了.

  • 2020-04-21 14:47:13

    Redis危险命令重命名、禁用

    flushdb,清空数据库 flushall,清空所有记录，数据库 config,客户端连接后可配置服务器 keys,客户端连接后可查看所有存在的键

  • 2020-04-21 15:13:15

    redis 简单使用

    Redis和Memcached类似，也属于k-v数据存储 Redis官网 https://redis.io支持更多value类型，除了和string外，还支持hash、lists（链表）、sets（集合）和sorted sets（有序集合） Redis是可以把数据存储在磁盘上的并且使用了两种文件格式：全量数据(RDB)和增量请求(aof)。一般叫做redis持久化 全量数据格式是把内存中的数据写入磁盘，便于下次读取文件进行加载。

  • 2020-04-21 15:14:20

    SpringBoot + Redis：基本配置及使用

    # Redis数据库索引（默认为0） spring.redis.database=0# Redis服务器地址 spring.redis.host=127.0.0.1# Redis服务器连接端口 spring.redis.port=6379# Redis服务器连接密码（默认为空） spring.redis.password=# 连接池最大连接数（使用负值表示没有限制） spring.redis.jedis.pool.max-active=20# 连接池最大阻塞等待时间（使用负值表示没有限制） spring.redis.jedis.pool.max-wait=-1# 连接池中的最大空闲连接 spring.redis.jedis.pool.max-idle=10# 连接池中的最小空闲连接 spring.redis.jedis.pool.min-idle=0# 连接超时时间（毫秒） spring.redis.timeout=1000