离开页面之前的JavaScript

kd7*_*kd7 209 javascript jquery

我想在用户离开页面之前做出确认.如果他说好,那么它将重定向到新页面或取消离开.我尝试使用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>
Run Code Online (Sandbox Code Playgroud)

但它确认页面已经关闭后?怎么做得好?

如果有人用jQuery演示如何做到这一点会更好吗?

Roc*_*mat 331

onunload(或onbeforeunload)无法将用户重定向到另一个页面.这是出于安全原因.

如果要在用户离开页面之前显示提示,请使用onbeforeunload:

window.onbeforeunload = function(){
  return 'Are you sure you want to leave?';
};
Run Code Online (Sandbox Code Playgroud)

或者使用jQuery:

$(window).bind('beforeunload', function(){
  return 'Are you sure you want to leave?';
});
Run Code Online (Sandbox Code Playgroud)

这只会询问用户是否要离开页面,如果他们选择留在页面上,则无法重定向.如果他们选择离开,浏览器将转到他们告诉它去的地方.

您可以onunload在卸载页面之前使用它来执行操作,但是您无法从那里重定向(Chrome 14+阻止警报内部onunload):

window.onunload = function() {
    alert('Bye.');
}
Run Code Online (Sandbox Code Playgroud)

或者使用jQuery:

$(window).unload(function(){
  alert('Bye.');
});
Run Code Online (Sandbox Code Playgroud)

  • @Joseph:当你从`onbeforeunload`返回一个字符串时,浏览器会将该字符串放入自己的确认框中.在`onunload`和`onbeforeunload`中使用`confirm`是没用的,因为只有浏览器可以控制它的去向,而不是你.看看这个演示:http://jsfiddle.net/3kvAC/ (12认同)
  • 只是注意,如果你想在`onbeforeunload`中有条件地显示一条消息,`return false`将使浏览器在对话框中显示"false".如果要让窗口关闭而没有用户警报,则需要"返回undefined". (6认同)
  • @RocketHazmat Chrome也有.它现在只说:**你想离开这个网站吗?**你所做的改变可能无法保存. (5认同)
  • @Adam:Firefox决定不允许自定义该消息.这是浏览器的一部分,因此您无法覆盖该行为.其他浏览器也可能正在删除自定义消息的功能.请参阅:https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload#Browser_compatibility (4认同)
  • @ programmer5000这很好,因为一些恶意网站可能会显示一些无用的警告(例如"你不能在不提供银行信息的情况下离开") (4认同)
  • @Rocket:测试了一切,你是绝对正确的.谢谢!我想"你每天都学到新东西"...... (2认同)

Was*_* A. 32

当您检测到表单状态发生变化时,此代码也会发生变化

$('#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.
});
Run Code Online (Sandbox Code Playgroud)

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


Aji*_*ngh 18

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

<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>
Run Code Online (Sandbox Code Playgroud)


Dav*_*ger 10

要使用Chrome 14+的popop,您需要执行以下操作:

jQuery(window).bind('beforeunload', function(){
    return 'my text';
});
Run Code Online (Sandbox Code Playgroud)

将询问用户他是想留下还是离开.


Min*_*tta 10

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

window.onbeforeunload = function () {
            if (isDirty) {
                return "There are unsaved data.";
            }
            return undefined;
        }
Run Code Online (Sandbox Code Playgroud)

返回"未定义"将禁用确认

注意:返回"null"将不适用于IE

您也可以使用"undefined"来禁用确认

window.onbeforeunload = undefined;
Run Code Online (Sandbox Code Playgroud)


spe*_*.sm 6

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

window.onbeforeunload = s => "";
Run Code Online (Sandbox Code Playgroud)

要询问用户何时修改了页面上的内容,请参阅此答案.


Sim*_*zen 5

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

采取这种方法来显示消息,仅当用户更改某些内容时

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?'
}
Run Code Online (Sandbox Code Playgroud)


Raj*_*rma 5

此处的大多数解决方案对我都不起作用,因此我使用了此处找到的解决方案

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

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

});
Run Code Online (Sandbox Code Playgroud)