页面数据关闭，或刷新，或链接到其他页面提示有否保存数据

最新推荐文章于 2024-05-12 21:58:25 发布

yueyuehe

最新推荐文章于 2024-05-12 21:58:25 发布

阅读量1.5k

点赞数

分类专栏： c# ASP.NET HTML 文章标签： html 关闭提示 aps 前端 onbeforeunload

本文链接：https://blog.csdn.net/yueyuehe/article/details/52814307

版权

c# ASP.NET 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

HTML

2 篇文章 0 订阅

订阅专栏

问题：在我开发过程中遇到的需求，当用户在修改或新增某些数据时可能会忘记保存就关闭页面或者链接到其他页面去，如果没有提示那么幸幸苦苦的填的数据就会丢失

解决办法： window.onbeforeunload 这个事件

onbeforeunload 事件是在即将离开此页面之前触发（包括刷新，关闭页面，跳转到其他页面），会弹出提示框是否离开此页面，

基本用法

<!---可以添加自己的方法->

return “提示信息”
}
</script>

说明：如果有return那么他会弹出提示框，否则将直接跳转，不会提示，利用这个特性可以判断用户输入的数据是否改变，如果有改变则提示，没有改变则不提示，直接跳转

代码：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<script type="text/javascript">
window.onbeforeunload = function () {

//
var oListen = document.getElementById("IsChanged").value;
if (oListen == "true") {
return "数据未保存是否离开?";
}
}
</script>
</head>
<body>
测试跳转页面弹出提示
<a href="http://www.baidu.com"> baidu</a>
改变： <input type="text" id="text1" οnchange="document.getElementById('IsChanged').value = 'true';" />

在需要监听的文本框加onchange事件，改变就让隐藏的input的值改变，最后再判断
<button οnclick="document.getElementById('IsChanged').value = 'false';alert('已保存');">保存</button>

如果用户保存了就将值改变回来
<input type="hidden" id="IsChanged" />
</body>
</html>

yueyuehe

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
页面数据关闭，或刷新，或链接到其他页面提示有否保存数据

问题：在我开发过程中遇到的需求，当用户在修改或新增某些数据时可能会忘记保存就关闭页面或者链接到其他页面去，如果没有提示那么幸幸苦苦的填的数据就会丢失解决办法： window.onbeforeunload 这个事件onbeforeunload 事件是在即将离开此页面之前触发（包括刷新，关闭页面，跳转到其他页面），会弹出提示框是否离开此页面，基本用法 window.
复制链接

扫一扫