window-onbeforeunload 的使用

官方定义

onbeforeunload 事件在即将离开当前页面(刷新或关闭)时触发。该事件可用于弹出对话框,提示用户是继续浏览页面还是离开当前页面。

使用场合

当我们界面中有未提交的表单,或者有未保存的文本内容,用户点击关闭按钮,需要浏览器弹出提示框,就需要使用这个事件 onbeforeunload

调用方式

window.addEventListener('beforeunload', function (e) {
  // Cancel the event
  e.preventDefault();
  // Chrome requires returnValue to be set
  e.returnValue = '自定义文本';
});

// 当然,也可以通过以下方式调用:
window.onbeforeunload = function(event) { 
  ...
};

或者在body标签上绑定onbeforeunload,但更推荐使用addEventListener的方式调用。

HTML规范建议作者使用 Event.preventDefault() 而非 Event.returnValue 的方式来提示用户。但是,该种方法还没有得到全部浏览器的支持,所以需要配合使用。

React 中使用

在 React 中,需要在 DidMount 阶段监听这个事件,在 willunmount 阶段释放这个事件的回调函数。

componentDidMount() {
  window.onbeforeunload = this.onbeforeunload;
}

componentWillUnmount() {
  window.onbeforeunload = null;
}

onbeforeunload = () => {
  // handle unsaved file
  return '';
}

界面提示文本

当事件返回值不是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的开关变量用于开启这个功能。

参考文档

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/onbeforeunload

https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload

https://www.runoob.com/jsref/event-onbeforeunload.html

https://blog.csdn.net/u014259536/article/details/89888573

  • 7
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
window.onbeforeunload是JavaScript中的一个事件处理函数,它会在用户离开网页之前被触发。你可以使用这个事件来向用户显示一个确认对话框,询问他们是否真的要离开页面。当用户点击浏览器关闭按钮、刷新按钮或导航到其他页面时,这个事件会被触发。你可以在onbeforeunload事件中返回一个字符串,这个字符串将显示在确认对话框中,以提醒用户是否要离开页面。 在JavaScript中,你可以使用以下代码来绑定window.onbeforeunload事件: window.onbeforeunload = function() { return "是否要离开"; }; 这样,当用户试图离开页面时,将显示一个确认对话框,上面显示的文本是"是否要离开"。用户可以选择留在页面或继续离开。 另外,在HTML中,你也可以使用以下代码来绑定onbeforeunload事件: <body onbeforeunload="SomeJavaScriptCode"> 这样,在用户离开页面之前,SomeJavaScriptCode这段JavaScript代码将会被执行。你可以在这段代码中实现一些自定义的逻辑,例如保存用户的数据或执行其他操作。 总结起来,window.onbeforeunload是一个用于在用户离开页面之前触发的JavaScript事件处理函数,你可以在其中显示一个确认对话框或执行其他自定义逻辑。它可以通过JavaScript代码或在HTML中绑定来使用。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [阻止浏览器刷新,后退,关闭事件(onbeforeunload事件)](https://blog.csdn.net/m0_46937095/article/details/109852318)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值