我可以为特定元素覆盖onbeforeunload吗?
我的页面工作量很大,并且我不希望用户在没有警告的情况下离开该页面(关闭浏览器,单击后退按钮等)。我发现onbeforeunload事件(我认为是特定于IE的事件,对我来说效果很好,因为该项目使用了许多ActiveX)。
问题是,我希望用户能够单击右上角的小"帮助"图标并随时弹出帮助窗口。这会导致onbeforeunload触发,即使主窗口永远不会移到任何地方并且页面也永远不会卸载。
当onbeforeunload事件运行时运行的JavaScript函数只是将文本放入event.returnValue中。如果我能以某种方式确定单击了帮助图标,则在这种情况下我无法将文本放入event.returnValue中。但是我怎么能把页面弄清楚呢?
解决方案
回答
编辑:基于我的不了解,我下面的"解决方法"是完全矫kill过正。遵循上述Shog9的答案。
好的,所以当我写问题时,我想出了一种暂时解决的方法。
我将全局JavaScript变量用作布尔值,以决定是否将图标悬停在图标上。然后,我将事件添加到图像的onmouseover和onmouseout事件上,并编写将设置该值的函数。最后,我只是在处理onbeforeunload的函数中编写代码,该函数将在设置event.returnValue之前检查此值。
可能不是完美的解决方法,但现在可以使用。
回答
让我猜:帮助" icon"实际上是带有javascript:
url的链接?将其更改为真实的按钮,真实的链接,或者至少将功能放入onclick事件处理程序中(这可以防止默认行为)。问题解决了。
<!-- clicking this link will do nothing. No onbeforeunload handler triggered. Nothing. And you could put something in before the return false bit... ...and the onunload handler would still not get called... --> <a href="http://www.google.com/" onclick="return false;">blah1</a> <!-- this should also do nothing, but IE will trigger the onbeforeunload handler --> <a href="javascript:void(0)">blah2</a>
回答
我的方法有点笨拙,但是在大多数情况下都可以使用。
创建一个包含一个带有一个100%单帧FRAMESET的FRAMESET的"保留"弹出页面,然后将普通的onUnload和onbeforeUnload事件处理程序放置在HEAD中。
<html> <head> <script language="Javascript" type="text/javascript"> window.onbeforeunload = exitCheck; window.onunload = onCloseDoSomething; function onCloseDoSomething() { alert("This is executed at unload"); } function exitCheck(evt) { return "Any string here."} </script> </head> <frameset rows="100%"> <FRAME name="main" src="http://www.yourDomain.com/yourActualPage.aspx"> </frameset> <body> </body> </html>
使用此方法,我们可以自由使用想要查看的实际页面,回发并单击超链接,而不会触发外部框架onUnload或者onbeforeUnload事件。
如果外框刷新或者实际关闭,则事件将触发。
就像我说的那样,不是完全验证,但是每次单击或者回发时都会触发该事件。
回答
在互联网上,我们会发现很多人建议我们使用类似
window.onbeforeunload = null
但这在IE6中对我不起作用。在MSDN文档中读取事件对象后,我发现对event.cancelBubble属性的引用,我认为这是解决方案。但是感谢Orso指出设置" event.cancelBubble = true"是无用的,摆脱确认提示的方法是完全排除return语句,我选择使用布尔变量作为标志来决定是否归还与否。在下面的示例中,我以编程方式在后面的代码中添加了javascript代码:
Page.ClientScript.RegisterStartupScript(typeof(String), "ConfirmClose", @" <script> window.onbeforeunload = confirmExit; function confirmExit() { if(postback == false) return ""Please don't leave this page without clicking the 'Save Changes' or 'Discard Changes' buttons.""; } </script>");
然后帮助按钮将包含以下aspx标记:
OnClientClick="postback=true;return true;
这会将'postback'变量设置为true,该变量将在ConfirmExit()函数中获取,具有取消事件的作用。
希望我们觉得这个有帮助。它已经过测试,并且可以在IE6和FF 1.5.0.2中运行。