防止页面刷新通常是指阻止用户通过浏览器刷新按钮、快捷键(F5/Ctrl+R)或地址栏回车等方式重新加载当前页面。这在某些场景下很有用,比如防止表单数据丢失或保持特定应用状态。
$(window).on('beforeunload', function(e) {
// 现代浏览器要求设置returnValue
e.preventDefault();
e.returnValue = '您确定要离开吗?所有未保存的更改将会丢失。';
return e.returnValue;
});
$(document).keydown(function(e) {
// 阻止F5刷新
if (e.keyCode === 116) {
console.log("F5刷新被阻止");
return false;
}
// 阻止Ctrl+R刷新 (Windows/Linux)
if (e.ctrlKey && e.keyCode === 82) {
console.log("Ctrl+R刷新被阻止");
return false;
}
// 阻止Cmd+R刷新 (Mac)
if (e.metaKey && e.keyCode === 82) {
console.log("Cmd+R刷新被阻止");
return false;
}
});
$(document).bind("contextmenu", function(e) {
return false;
});
beforeunload
事件的处理有严格限制,自定义消息可能不会显示,只会显示浏览器默认的提示。// 使用本地存储保存状态
function saveState() {
localStorage.setItem('appState', JSON.stringify(currentState));
}
// 页面加载时恢复状态
$(document).ready(function() {
if (localStorage.getItem('appState')) {
currentState = JSON.parse(localStorage.getItem('appState'));
// 恢复界面状态...
}
// 定期自动保存
setInterval(saveState, 30000);
});
这种方法提供了更好的用户体验,同时达到了防止数据丢失的目的。