页面关闭事件 beforeunload onbeforeunload

beforeunload:会在页面关闭或刷新调用,出发事件时,弹出对话框是否关闭,确定则关闭页面,取消则保持该页面。

jquery离开页面时出现提示:

//绑定beforeunload事件 
$(window).bind('beforeunload',function(){ 
   return '您输入的内容尚未保存,确定离开此页面吗?'; 
}); 

//解除绑定 
$(window).unbind('beforeunload'); 
js离开页面时的提示 onbeforeunload事件
window.onbeforeunload = function(event) { 
   return confirm("确定退出吗"); 
}
以下情况会出发弹窗事件:
1 .关闭浏览器窗口 
2.通过地址栏或收藏夹前往其他页面的时候 
3·点击返回,前进,刷新,主页其中一个的时候 
4·点击 一个前往其他页面的url连接的时候 
5·调用以下任意一个事件的时候:click,document.write()方法(输出内容),document.open()  打开一个新的空白文档,document.close()方法可关闭一个由open()方法打开的输出流,并显示选定的数据。
,window close (),form.submit. 
 6 ·重新赋予location.href的值的时候。
 7 ·通过input type=”submit”按钮提交一个具有指定action的表单的时候。
 8 .可以用在以下元素: body, window,frameset




### HTML5 `beforeunload` 事件用法 当浏览器窗口即将卸载页面时会触发 `beforeunload` 事件。此事件通常用于提示用户确认是否真的要离开当前页面,尤其是在有未保存数据的情况下。 #### 基本语法 通过 JavaScript 添加 `beforeunload` 事件监听器可以实现这一功能: ```javascript window.addEventListener('beforeunload', function (event) { // 设置对话框中的消息文本 const message = '你确定要离开吗?'; // 兼容不同浏览器设置返回值的方式 event.returnValue = message; }); ``` 这段代码会在用户尝试关闭标签页或导航到其他网页之前弹出一个带有自定义消息的确认对话框[^1]。 对于更复杂的场景,比如需要兼容旧版IE浏览器,则可采用如下方式: ```javascript if (window.attachEvent) { // IE 浏览器处理方法 window.attachEvent('onbeforeunload', function () { return '你确定要离开吗?'; }); } else { // 非IE 浏览器处理方法 window.addEventListener('beforeunload', function (e) { e.preventDefault(); e.returnValue = ''; return '你确定要离开吗?'; }, false); } ``` 需要注意的是,在现代浏览器中,虽然开发者能够指定显示的消息字符串,但实际上大多数主流浏览器为了安全考虑并不会真正展示该字符串内容,而是使用默认文案来询问用户是否继续操作。 #### 实际应用案例 假设有一个在线编辑工具希望提醒用户是否有未保存的工作,在这种情况下就可以利用上述技术防止意外丢失工作成果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值