在我的系统中编辑页面时，用户可能决定导航到另一个网站，这样做可能会丢失他们尚未保存的所有编辑。
我想拦截任何转到另一个页面的尝试，并提示用户确保他们希望发生这种情况，因为他们可能会丢失当前的工作。
Gmail 以非常相似的方式执行此操作。例如，撰写一封新电子邮件，开始在邮件正文中输入内容并在地址栏中输入新位置（例如 twitter.com 或其他内容）。它会提示询问“你确定吗？”
想法如何复制这个？我的目标是 IE8，但也希望与 Firefox 和 Chrome 兼容。
拦截页面退出事件
IT技术
javascript
internet-explorer
dom-events
2021-01-26 08:19:59
4个回答
类似于 Ghommey 的回答，但这也支持旧版本的 IE 和 Firefox。
window.onbeforeunload = function (e) {
var message = "Your confirmation message goes here.",
e = e || window.event;
// For IE and Firefox
if (e) {
e.returnValue = message;
}
// For Safari
return message;
};
看到这篇文章。您正在寻找的功能是onbeforeunload
示例代码：
<script language="JavaScript">
window.onbeforeunload = confirmExit;
function confirmExit()
{
return "You have attempted to leave this page. If you have made any changes to the fields without clicking the Save button, your changes will be lost. Are you sure you want to exit this page?";
}
</script>
除了烦人的确认弹出窗口之外，最好延迟一点（几毫秒）来管理成功地将未保存的数据发布到服务器，我使用将虚拟文本写入控制台来管理我的站点，如下所示：
window.onbeforeunload=function(e){
// only take action (iterate) if my SCHEDULED_REQUEST object contains data
for (var key in SCHEDULED_REQUEST){
postRequest(SCHEDULED_REQUEST); // post and empty SCHEDULED_REQUEST object
for (var i=0;i<1000;i++){
// do something unnoticable but time consuming like writing a lot to console
console.log('buying some time to finish saving data');
};
break;
};
}; // no return string --> user will leave as normal but data is send to server
编辑： 另请参阅Synchronous_AJAX以及如何使用jquery执行此操作
我有用户没有完成所有必需的数据。
<cfset unloadCheck=0>//a ColdFusion precheck in my page generation to see if unload check is needed
var erMsg="";
$(document).ready(function(){
<cfif q.myData eq "">
<cfset unloadCheck=1>
$("#myInput").change(function(){
verify(); //function elsewhere that checks all fields and populates erMsg with error messages for any fail(s)
if(erMsg=="") window.onbeforeunload = null; //all OK so let them pass
else window.onbeforeunload = confirmExit(); //borrowed from Jantimon above;
});
});
<cfif unloadCheck><!--- if any are outstanding, set the error message and the unload alert --->
verify();
window.onbeforeunload = confirmExit;
function confirmExit() {return "Data is incomplete for this Case:"+erMsg;}
</cfif>