window .addEventListener ('beforeunload' , function (e ) {
e.preventDefault ();
e.returnValue = '自定义文本' ;
window .onbeforeunload = function (event ) {
或者在body标签上绑定onbeforeunload,但更推荐使用addEventListener
的方式调用。
如果需要添加beforeunload点击确认后的处理代码,可以直接添加unload事件监听。
window .addEventListener ('unload' , function (event ) {
console .log ('onunload!!!!!' )
let xhr = new XMLHttpRequest ();
xhr.open ('get' , '/test' , true )
xhr.send ()
let now = new Date ()
while (new Date () - now < 100 ) { }
HTML规范建议作者使用 Event.preventDefault() 而非 Event.returnValue 的方式来提示用户。但是,该种方法还没有得到全部浏览器的支持,所以需要配合使用。
returnValue返回值
当事件返回值不是null或者undefined时,用户将会被提醒是否离开页面。(但测试后发现即便返回null或者undefined,弹出框也会被展示)。
如果不需要展示弹窗,不使用 Event.preventDefault(),Event.returnValue即可。
returnValue自定义文本无效
在旧版本浏览器中,事件的返回值会被展示在对话框中。但从Firefox 44,Chrome 51,Opera 38,和Safari 9.1以后,返回文本将不会被展示,换言之,无法自定义弹窗提示文本。
默认的提示文本如下:
Firefox(66.0.3)
“此页面想询问您是否要离开 - 您输入的数据可能不会被保存”
Safari(10.1.2)
“您确定要离开此页面吗?”
Chrome(74.0.3729.131)
“重新加载此网站?”
“系统可能不会保存您所做的更改。”
alert,confirm,prompt不执行
在一些浏览器中,在onbeforeunload中调用alert,confirm,prompt等方法会被忽略。
onbeforeunload无效
之前遇到的情况是,在chrome中onbeforeunload事件时而执行时而失效,以为是浏览器的兼容问题,百思不得其解,但后来发现如下解释:
As of Chrome 60 , the confirmation will be skipped if the user has not performed a gesture in the frame or page since it was loaded.
在Chrome和Firefox中,页面加载完成后,如果用户未对页面进行操作,比如“点击”、“输入”等等,onbeforeunload将不会被执行。而在Safari中onbeforeunload总是会被执行。
需要指出的是,许多浏览器会忽略该事件并自动关闭页面无需用户的确认。火狐浏览器在配置页面about:config设有一个dom.disable_beforeunload的开关变量用于开启这个功能。
unload加异步请求
unload事件如果要发异步请求的话,需要后面给补一段同步代码阻塞一下,否则请求会发不出去。
3935
JackSparrow18
JavaScript