JavaScript离开页面之前
我想在用户离开页面之前进行确认。 如果他说好,那么它会redirect到新的页面或取消离开。 我试图使它onunload
<script type="text/javascript"> function con() { var answer = confirm("do you want to check our other products") if (answer){ alert("bye"); } else{ window.location = "http://www.example.com"; } } </script> </head> <body onunload="con();"> <h1 style="text-align:center">main page</h1> </body> </html>
但确认页面已经closures了吗? 如何正确地做到这一点?
如果有人演示如何用jQuery来做,会更好吗?
onunload
(或onbeforeunload
)不能将用户redirect到另一个页面。 这是出于安全原因。
如果要在用户离开页面之前显示提示,请使用onbeforeunload
:
window.onbeforeunload = function(){ return 'Are you sure you want to leave?'; };
或者用jQuery:
$(window).bind('beforeunload', function(){ return 'Are you sure you want to leave?'; });
这只会询问用户是否要离开页面,如果他们select留在页面上,则不能redirect他们。 如果他们select离开,浏览器将会去他们告诉它去的地方。
您可以使用onunload
在页面卸载之前执行onunload
操作,但无法从该页面redirect(Chrome 14+在onunload
内部阻止警报):
window.onunload = function() { alert('Bye.'); }
或者用jQuery:
$(window).unload(function(){ alert('Bye.'); });
这个代码当你也检测表单状态改变了或没有。
$('#form').data('serialize',$('#form').serialize()); // On load save form current state $(window).bind('beforeunload', function(e){ if($('#form').serialize()!=$('#form').data('serialize'))return true; else e=null; // ie; if form state change show warning box, else don't show it. });
您可以通过Google JQuery Form Serialize函数,这将收集所有表单input并将其保存在数组中。 我想这个解释就足够了:)
这将离开当前页面提醒
<script type='text/javascript'> function goodbye(e) { if(!e) e = window.event; //e.cancelBubble is supported by IE - this will kill the bubbling process. e.cancelBubble = true; e.returnValue = 'You sure you want to leave?'; //This is displayed on the dialog //e.stopPropagation works in Firefox. if (e.stopPropagation) { e.stopPropagation(); e.preventDefault(); } } window.onbeforeunload=goodbye; </script>
为了使用Chrome 14+,您需要执行以下操作:
jQuery(window).bind('beforeunload', function(){ return 'my text'; });
用户将被询问他是否想留下或离开。
您可以使用下面的一行在离开页面之前始终询问用户。
window.onbeforeunload = s => "";
要询问用户何时修改了页面上的内容,请参阅此答案 。
这是我刚才显示的确认消息,当我有未保存的数据
window.onbeforeunload = function () { if (isDirty) { return "There are unsaved data."; } return undefined; }
返回“未定义”将禁用确认
注意:返回“null”将不适用于IE
您也可以使用“未定义”禁用确认
window.onbeforeunload = undefined;