如何阻止windows.onbeforeunload被IE中的javascript:href链接触发?
我正在为我的表单构建一个故障保护,它将警告用户,如果他们离开页面,他们的表单数据将丢失(类似于gmail所做的)。
window.onbeforeunload = function () { if (formIsDirty) { return "You have unsaved data on this form. Don't leave!"; } }
上面的函数在firefox中运行得很好,但在IE中它由任何href链接触发,即使是链接到javascript而不是其他页面的链接。
例如….
click
我想知道是否有办法绕过这个,因为我不希望用户认为他们只是点击它上面的按钮就离开了页面。 我没有选择重写所有各种链接,因为它们是内置的和众多的。
有任何想法吗?
您可以在hover这些链接时删除并重新分配onbeforeunload:
jQuery( function($) { //store onbeforeunload for later use $(window).data('beforeunload',window.onbeforeunload); //remove||re-assign onbeforeunload on hover $('a[href^="javascript:"]') .hover( function(){window.onbeforeunload=null;}, function(){window.onbeforeunload=$(window).data('beforeunload');} ); } );
我刚遇到类似的问题,发现了一个非常简单的解决方案:
$("a").mousedown(function() { $(window).unbind(); });
这将在触发click事件之前删除onbeforeunload事件。
将任何脚本移动到click
事件处理程序,并为没有JavaScript的用户提供后备页面:
click
不显眼的JS冠军可能会反对使用onclick
属性,但实际上它是有效的,它是添加事件处理程序的最简单方法,也是提供示例的最简单方法。 为了更好地分离关注点,您可以改为使用DOM0 onclick
属性, addEventListener()
/ attachEvent()
或库。
如果在a标签的href中包含书签符号,则应该仍然可以使用onclick事件来包含JavaScript。
click
我已经运行了许多测试,这似乎执行JavaScript而不会触发onbeforeunload事件。 我很想知道这是否适用于其他人,或者在以这种方式实现标记后仍然存在同样的问题。
(像其他一些答案一样,这需要改变JavaScript的绑定方式。如果这对你不起作用,请忽略。)
我发现在IE 7到IE 10中,简单地使用带有preventDefault
jQuery .click()而不显示onbeforeunload
消息(IE 11没有显示任何测试用例的beforeunload
消息)。 无论href是’#’还是javascript:void(0)
。 如果直接使用attachEvent
/ addEventListener
我希望结论成立,但我没有测试。
http://jsbin.com/tatufehe/1上有以下演示。 两个版本(绿色)与preventDefault
工作(不显示beforeunload
对话框)。 没有preventDefault
那个确实显示它(作为比较)。
$( document ).ready( function () { $( 'a' ).click( function ( evt ) { $( '#display' ).text( 'You clicked: ' + $( this ).text() ); if ( $(this).hasClass( 'withPreventDefault' ) ) { evt.preventDefault(); } } ); }) window.onbeforeunload = function () { return "Are you sure you want to leave?"; };
Number sign link *with* preventDefault
如果用户鼠标位于链接上并且他们使用键盘触发刷新页面或使用键盘激活链接,则提示将不会显示。 因此Dr.Molle方法在这种罕见的情况下不起作用。