返回
js拦截页面跳转提示保存
2023-11-14 1934 0
要拦截页面跳转并提示用户保存内容,你可以使用 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 函数中,你可以根据页面中的实际内容或表单字段状态来检查是否有未保存的更改。
网友点评
提交
相关阅读
前端js拖拽插件库有哪些?
js页面滚动到某个元素处
常用js表单验证插件推荐
js使用scroll事件实现锚点滚动到页面顶部时导航高亮
js使用IntersectionObserver实现锚点在当前页面视口时导读高亮
前端js游戏框架有哪些?
js复制文本到剪贴板
js对象自动属性绑定html模版插件
相关帖子
Blazor Error: Connection disconnected with error 'TypeError: Failed to fetch'.
为什么 Bing Webmaster 显示已编制索引,但是在 Bing 搜索中 site: 域名 查询无结果
Strong 加速器使用评测|在中国能否稳定访问?安全性与速度全面解析
2025年最新 全球主流公共DNS服务器大全
OpenClaw AI Agent 是否被过度吹捧?普通人真的需要养龙虾吗?
io.net官网和介绍
国内99元/年云服务器推荐:2025年超值云主机指南
精灵学院机场值得买吗?精灵学院机场购买哪个套餐最划算?