JavaScript在离开页面之前

我想在用户离开页面之前做一个确认。如果他说ok，那么它将重定向到新的页面或取消离开。我试着用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>

但它确认后，页面已经关闭?如何正确地做呢?

如果有人展示如何用jQuery来做，那就更好了。

435592 次浏览
小开

onunload(或onbeforeunload)不能将用户重定向到另一个页面。这是出于安全考虑。

如果你想在用户离开页面之前显示一个提示，使用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?';
});

这只会询问用户是否想要离开页面，如果他们选择留在页面上，你不能重定向他们。如果他们选择离开，浏览器会去他们告诉它去的地方。

你可以使用onunload在页面卸载之前做一些事情，但你不能从那里重定向(Chrome 14+在onunload内阻塞警报):

window.onunload = function() {
alert('Bye.');
}

或者使用jQuery:

$(window).unload(function(){
alert('Bye.');
});
小开

为了有一个弹出Chrome 14+，你需要做以下:

jQuery(window).bind('beforeunload', function(){
return 'my text';
});

用户将被问及他想要留下还是离开。

小开

此代码还用于检测窗体状态是否发生变化。

$('#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; // i.e; if form state change show warning box, else don't show it.
});

你可以谷歌JQuery表单序列化函数，这将收集所有表单输入并保存在数组中。我想这个解释就足够了:)

小开

这将在离开当前页面时发出警报

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

在离开页面之前，可以使用下面的一行程序总是询问用户。

window.onbeforeunload = s => "";

要询问用户页面上的内容何时被修改，请参见这个答案。

小开

这就是我所做的显示确认消息，只是当我有未保存的数据

window.onbeforeunload = function() {
if (isDirty) {
return 'There is unsaved data.';
}
return undefined;
}

返回undefined将禁用确认

注意:返回null将不能在IE中工作

你也可以使用undefined禁用确认

window.onbeforeunload = undefined;
小开 
<!DOCTYPE html>
<html>
<body onbeforeunload="return myFunction()">


<p>Close this window, press F5 or click on the link below to invoke the onbeforeunload event.</p>


<a href="https://www.w3schools.com">Click here to go to w3schools.com</a>


<script>
function myFunction() {
return "Write something clever here...";
}
</script>


</body>
</html>

https://www.w3schools.com/tags/ev_onbeforeunload.asp

小开

更有用一点，启用和禁用

$(window).on('beforeunload.myPluginName', false); // or use function() instead of false
$(window).off('beforeunload.myPluginName');
小开

通常情况下，当用户在表单中进行了更改，但这些更改没有保存时，您希望显示此消息。

采用这种方法只在用户更改某些内容时才显示消息

var form = $('#your-form'),
original = form.serialize()


form.submit(function(){
window.onbeforeunload = null
})


window.onbeforeunload = function(){
if (form.serialize() != original)
return 'Are you sure you want to leave?'
}
小开

这里的大多数解决方案都不适合我，所以我使用了一个找到在这里

我还添加了一个变量来确定是否允许确认框

window.hideWarning = false;
window.addEventListener('beforeunload', (event) => {
if (!hideWarning) {
event.preventDefault();
event.returnValue = '';
}


});

提交答案