window-onbeforeunload 的使用
官方定义
onbeforeunload 事件在即将离开当前页面(刷新或关闭)时触发。该事件可用于弹出对话框,提示用户是继续浏览页面还是离开当前页面。
使用场合
当我们界面中有未提交的表单,或者有未保存的文本内容,用户点击关闭按钮,需要浏览器弹出提示框,就需要使用这个事件 onbeforeunload
调用方式
window.addEventListener('beforeunload', function (e) {// Cancel the evente.preventDefault();// Chrome requires returnValue to be sete.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 filereturn '';
}
界面提示文本
当事件返回值不是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
window-onbeforeunload 的使用相关推荐
- window.onbeforeunload() 事件调用ajax的解决方法
1 function window.onbeforeunload() { 2 3 var jhid = $("#ctl00_ContentBody_hfGuid").val(); ...
- window.onunload和window.onbeforeunload事件
window.onunload和window.onbeforeunload事件 两事件的相同点 onunload,onbeforeunload都是在刷新或关闭时调用. 不同点 a)onbeforeun ...
- onbeforeunload触发ajax,浅谈window.onbeforeunload() 事件调用ajax
经常有这样的需求,就是在离开某个web页面时,用户不一定点注销,这样会导致会话不能及时销毁.为实现用户离开页面时,自动注销功能,需要在web页面的onbeforeunload事件处理函数中发送注销命令 ...
- window.onbeforeunload进行页面提示
防止用户误操作:刷新或者关闭页面时进行提示 在前端开发中有如下需求: 防止用户误操作 同时需要满足用户点击取消时,停留在当前页面不变,用户点击确定时,页面需要重新加载并且跳转到指定页面 为了使方法能够 ...
- 阻止window.onbeforeunload事件的弹出框 或 自定义弹出框
前引:网上很多关于window.onbeforeunload用来监听页面的意外退出或者关闭事件的用法但都会出现下面的弹出框.为此本博客提供方案使下面弹出框消失,但又能实现自己的相应业务功能. 在使用 ...
- chrome jquery ajax请求,在Chrome中window.onbeforeunload ajax请求
慕姐4208626 这与较新版本的Chrome有关.就像@Garry English 所说的那样,async在页面期间发送请求onunload将不起作用,因为浏览器会在发送请求之前终止线程.发送syn ...
- IE下a标签会触发window.onbeforeunload的问题
今天同事发现一个问题,在我做的控件中,点击tab切换的时候,IE上会触发他页面上的onbeforeunload的事件.一开始以为是我控件上事件导致的,但是当我把所有的绑定事件取消以后,问题依然存在.我 ...
- 用户关闭页面前提示,提醒保存内容 Window 的 unload onunload onbeforeunload 事件
用户关闭页面前提示,提醒保存内容 Window 的 unload onunload onbeforeunload 事件 在线测试例子: http://kylebing.cn/test/unload-e ...
- html5 onbeforeonload,window属性:onbeforeunload
onbeforeunload属性 WindowEventHandlers.onbeforeunload事件处理程序属性包含在发送beforeunload时执行的代码.这个事件在窗口即将到达unload ...
- window.open的小技巧分享(转)
今天再次谈起window.open是因为发现了一个比较好玩的小技巧,详细内容我们稍后详细说明. 聊到window.open,不得不说明一下他的使用方法,主要有两种形式: window.open()没有 ...
最新文章
- Ant Design Pro 组件事件绑定 Input onChange
- 前序中序后序遍历的顺序
- 主板怎么开启csm_华擎Z490主板移植AMD SAM加速技术:游戏性能提升最多11.5%
- Python shutil.md
- [Phonegap+Sencha Touch] 移动开发77 Cordova Hot Code Push插件实现自己主动更新App的Web内容...
- RabbitMQ学习之集群消息可靠性测试
- 利用Teensy进行EM410x卡模拟以及暴力破解EM410X类门禁系统可行性猜想
- OPENSSH升级为7.4
- big endian与little endian
- %%%%%%%%123564
- oracle拼音匹配,求完整简洁的Oracle获得汉字字符串拼音首字母和全拼的函数
- 我的第二次知识图谱问答(末尾gan货)
- 10.Go复合类型-切片
- ORA-01045: user ICCS lacks CREATE SESSION privilege; logon denied
- 树莓派基础实验24:超声波测距传感器实验
- 微信认识到成熟应用不该“跳来跳去”
- 计算机组成原理 累加器实验
- 主动降噪(Active Noise Control)
- C/C++实现文件加密器
- 模板引擎FreeMarker的介绍和使用