Question

我想在用户离开页面之前做出确认。如果他说好，那么它将重定向到新页面或取消离开。我尝试用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演示如何做到这一点会更好吗？

Answer 1

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.');
});

Answer 2

此代码还可以检测表单状态是否已更改。

$('#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.
});

您可以使用Google JQuery Form Serialize功能，这将收集所有表单输入并将其保存在数组中。我想这个解释就足够了:)）

Answer 3

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

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

Answer 4

要使用Chrome 14+弹出窗口，您需要执行以下操作：

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

将询问用户是否要留下或离开。

Answer 5

这就是我在未保存数据时显示确认消息的方法

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

返回＆＃34; undefined＆＃34;将禁用确认

注意：返回＆＃34; null＆＃34;不适用于IE

你也可以使用＆＃34; undefined＆＃34;禁用确认

window.onbeforeunload = undefined;

Answer 6

在离开页面之前，您可以使用以下单行始终询问用户。

window.onbeforeunload = s => "";

要询问用户何时修改了网页上的内容，请参阅this answer。

Answer 7

这里的大多数解决方案都不适合我，因此我使用了找到的here

我还添加了一个变量以允许或不允许确认框

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

});

Answer 8

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

Answer 9

稍微有点帮助，启用和停用

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

Answer 10

通常，当用户在表单中进行更改但未保存更改时，您希望显示此消息。

仅当用户更改了某些内容时，才采用这种方法显示消息

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?'
}

离开页面之前的JavaScript

10 个答案: