离开页面前 onbeforeunload 事件使用和兼容
在我们编写文章或者是写日志的时候，可能会不小心点击到其它链接，跳转到其它页面，导致我们写的东西没有保存，这是一个很大的损失，其实可以使用 onbeforeunload 事件来避免这样的事情发生，这也是提高用户体验的一个方法。
调用方法
onbeforeunload 事件可以直接写在 body 的标签里面，像这样：
<body onbeforeunload="return '温馨提醒：\n这些对您来说【非常重要】，建议点击【留在此页】';">
也可以自定义函数调用方法，这种方法更方便编写代码，所以也推荐大家使用这个方法：
window.onbeforeunload = function (e) {
e = e || window.event;
// For IE and Firefox prior to version 4
if (e) {
e.returnValue = '确定退出吗？ss';
}
// For Safari
return '确定退出吗？ss';
};使用举例
例如我们要在一个表单提交以前，防止用户因为误操作而跳转页面导致编写的内容丢失，我们可以这样编写代码：
表单 HTML 代码
<form id='YourFormId' action=''> <input type="button" name="button" id="button" value="提交" onclick="sumbit();"/> </form>
JavaScript 代码
var is_submit = false;
window.onbeforeunload=function checkLeave(e){
e = e || window.event; //此方法为了在firefox中的兼容
if(!is_submit){
e.returnValue='离开会使编写的内容丢失。';
}
}
//提交表单
function sumbit(){
is_submit = true;
document.getElementById('YourFormId').submit();
}代码说明：
- 在点击提交按钮的时候，会触发 submit() 方法，设置 is_submit 为true，然后在提交表单。
- 在页面被关闭、跳转、刷新的时候先检测 is_submit 是否为真，即是否提交了表单，如果没有提交表单则弹出确认窗口。
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论