问题:在我开发过程中遇到的需求,当用户在修改或新增某些数据时可能会忘记保存就关闭页面或者链接到其他页面去,如果没有提示那么幸幸苦苦的填的数据就会丢失
解决办法: window.onbeforeunload 这个事件
onbeforeunload 事件是在即将离开此页面之前触发(包括刷新,关闭页面,跳转到其他页面),会弹出提示框是否离开此页面,
基本用法
<script type="text/javascript">
window.onbeforeunload = function () {
<!---可以添加自己的方法->
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>