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或 documentbeforeunload事件后,将阻止浏览器使用内存中的页面导航缓存,例如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.


  • 2018-04-04 23:52:03

    PowerManager之PowerManager

    当你在做一些事情时,如果持续时间过长,那么一段时间后屏幕会灭掉,如果你想在你做这些事时屏幕始终保持点亮状态,那么你需要WakeLock的帮助。

  • 2018-04-07 23:35:16

    使用Intent传递对象的两种方式

    Intent 的用法相信你已经比较熟悉了,我们可以借助它来启动活动、发送广播、启动服务等。在进行上述操作的时候,我们还可以在Intent 中添加一些附加数据,以达到传值的效果,比如在FirstActivity 中添加如下代码:

  • 2018-04-10 14:59:59

    JS实现数组去重方法总结(六种方法)

    这篇文章给大家总结下JS实现数组去重方法(六种方法),面试中也经常会遇到这个问题。文中给大家引申的还有合并数组并去重的方法,感兴趣的朋友跟随脚本之家小编一起学习吧

  • 2018-04-13 17:28:33

    jsoup 使用总结4--高级用法之 script js 脚本

    大部分时候,我们使用jsoup解析网页的时候,都是直接找到某一类元素,或者按某种selector查询;具体使用方法可以参考jsoup官网文档 那么你有没有实际操作过,查找script js 脚本呢,因为很多时候页面的内容是根据js动态生成的,或者数据是动态变更;那么这个时候,我们只是获取html页面中script js脚本之间的内容。

  • 2018-04-15 12:56:05

    WebView控件之WebSettings各种配置方法源码总结

    WebSettings用于管理WebView状态配置,当WebView第一次被创建时,WebView包含着一个默认的配置,这些默认的配置将通过get方法返回,通过WebView中的getSettings方法获得一个WebSettings对象,如果一个WebView被销毁,在WebSettings中所有回调方法将抛出IllegalStateException异常。

  • 2018-04-16 07:28:10

    android点击事件,第一次无效,第二次才响应的问题

    今天碰到的问题,android的标题栏一个回退button,每次进入的时候第一次点击无效,一直到第二次点击时才响应,然后把代码copy到系统的回退按钮里面,结果每次都能响应,后面想了想,应该跟焦点有关系