要拦截页面跳转并提示用户保存内容,你可以使用 beforeunload 事件。这个事件会在页面准备卸载前触发,可以用来询问用户是否保存更改。
下面是一个示例代码:
window.addEventListener('beforeunload', function (e) {
// 检查是否需要提示保存内容的信息
if (isUnsavedChanges()) {
// 在现代浏览器中,返回的提示文本会被忽略,但仍然需要返回一个值
e.preventDefault();
e.returnValue = '';
// 返回自定义提示文本(部分旧版本浏览器会显示该提示)
return '您有未保存的更改,确定要离开吗?';
}
});
function isUnsavedChanges() {
// 这里可以添加逻辑来检查页面上是否有未保存的更改
// 如果有,返回 true;否则返回 false
// 例如:
// return (document.getElementById('unsavedChangesField').value !== '');
return true; // 为示例目的,总是返回 true
}
请注意,现代浏览器可能会忽略 beforeunload 事件中设置的自定义提示文本,而是显示默认的提示信息。这是为了防止滥用弹出提示来误导用户。因此,不要过分依赖自定义提示文本。
在 isUnsavedChanges 函数中,你可以根据页面中的实际内容或表单字段状态来检查是否有未保存的更改。