拦截页面退出事件

102

在我的系统中编辑页面时，用户可能决定导航到另一个网站，这样做可能会丢失所有未保存的编辑。拦截页面退出事件

我想拦截任何尝试转到另一个页面并提示用户确定他们希望发生这种情况，因为他们可能会失去他们当前的工作。

Gmail以非常相似的方式执行此操作。例如，编写一封新邮件，开始在邮件正文中输入内容，然后在地址栏中输入一个新位置（例如twitter.com或其他）。它会及时询问“你确定吗？”

想法如何复制这个？我的目标是IE8，但是想要兼容FF & Chrome。

来源

2009-11-09 Chris Ballance

http://stackoverflow.com/questions/147636/best-way-to-detect-when-user-leaves-a-web-page – 2009-11-09 23:00:12

127

类似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; 
};

来源

2009-11-10 00:02:01

你能解释第一行（var message = ...）吗？我不知道那个逗号和第二个表达式在做什么。 – mtmurdock 2012-07-27 17:01:34

@mtmurdock这只是用于声明多个变量的Javascript语法。 '变种FOO，巴;' 相同 '变种FOO;'' 变种巴;' – 2012-10-16 07:02:52

@mtmurdock，第二条语句 “_var_ E = ||éwindow.event;”意味着set ** e **等于参数_e_（如果它是真的）或者window.event（如果不是真的）。如果参数_e_为空，这将不是真的。 – 2012-10-16 07:09:53

看到这篇文章。你正在寻找的特点是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>

来源

2009-11-09 22:59:03 jantimon

有什么办法，以确定用户已经选择了“离开这个页面“选项而不是”留在这个页面上“？ – 2016-04-20 08:53:08

而是一个恼人的确认弹出的，这将是很好延迟离开只是有点（毫秒的物质）成功管理的未保存的数据发送到服务器，这是我用写作为我的网站托管虚拟文本控制台是这样的：

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

来源

2012-01-08 18:16:14 Remi

我喜欢弹出式窗口的替代方法。感谢您的建议，Remi。 – 2012-01-09 15:39:04

，这并不完全没有意义-1。JavaScript没有线程你正在做的是做一个postRequest，然后暂停网站的计算，而不允许任何人不做任何事（包括你的postRequest，同时在计算暂停之前已经发送）。 – fmsf 2012-07-04 14:12:52

这就是为什么它的工作原理：实际上，后请求是在计算暂停之前发送的，但是在页面实际保留之前对页面进行了一些阻塞，可以确保浏览器客户端（而不是JavaScript）有足够的时间来发送此请求正常。我注意到，当我只发送请求（不阻塞）并立即离开页面时，请求并不总是发送。 – Remi 2012-07-06 04:55:56

我有没有完成所有必需数据的用户。

<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>

来源

2015-01-08 22:38:02 gordon

拦截页面退出事件

回答

相关问题