离开页面前的JavaScript

233

我想在用户离开页面之前进行确认。如果他说确定，那么它将重定向到新页面或取消离开。我试图用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会更好呢？

javascript jquery

— kd7
source

1

哈哈哈...是的，那是完全正确的..但是幸运的是这不是我的网站...我的客户要求在他身边做这件事

— kd7 2011年

25

是的，但是当我要退出未保存的Gmail页面时，我真的很高兴看到这些警报。

— Etdashou 2012年

请注意，在Firefox 4+上，仅显示默认消息，而不显示您的自定义消息developer.mozilla.org/en-US/docs/Web/Events/beforeunload#Notes

— baptx

4

在离开网页之前进行未保存的更改之前

— Wasim A.

352

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

— 火箭危险品
source

12

@Joseph：当您从返回一个字符串时onbeforeunload，浏览器会将该字符串放入其自己的确认框中。confirm在onunload和中onbeforeunload，使用毫无用处，因为只有浏览器可以控制它的去向，而不是您。观看

— Rocket Hazmat

7

请注意，如果要在中有条件地显示消息onbeforeunload，return false将使浏览器在对话框中显示“ false”。return undefined如果要让窗口关闭而没有用户警报，则需要这样做。

— Dan Fitch

5

@Adam：Firefox决定禁止自定义该消息。那是浏览器的一部分，因此您不能覆盖该行为。其他浏览器也可能会删除自定义消息的功能。请参阅：developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/...

— 火箭危险品

8

@RocketHazmat Chrome也有。现在只说：您要离开这个网站吗？您所做的更改可能不会保存。

— 程序员

6

@ programmer5000很好，因为某些恶意网站可以显示一些无用的警告（例如“如果您不提供银行信息就无法离开”）

— Naman

34

当您还检测表单状态是否更改时，此代码。

$('#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表单序列化功能，该功能将收集所有表单输入并将其保存在数组中。我想这解释就足够了:)

— 瓦西姆A.
source

知道为什么这行不通吗？是否可以被其他js函数/ jquery插件覆盖？我正在运行一个webrtc应用程序，我想在客户端关闭窗口时“关闭”某些内容，因此需要关闭窗口。

— 嘿

1

这可以被任何其他插件等覆盖，大多数情况是开发人员在选择器上犯了错误，如果您怀疑覆盖，请将您的jquery代码放在</ body>标签关闭之前。

— Wasim A. 2014年

是的...如果您有一些JS代码在页面加载后隐藏或禁用输入字段，那么当您进行比较以比较“隐藏\禁用”字段时，将不会序列化。当然，检查将失败。;）解决方法：stackoverflow.com/a/4748748/114029

— Leniel Maccaferri 2014年

顺便说一句...这里有更好的方法：stackoverflow.com/q/16322042/114029

— Leniel Maccaferri 2014年

1

应该注意的是，当按下提交按钮时，这也会发出警告。可以单击“提交”按钮再次序列化表单，以防止这种情况。

— 亚当

19

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

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

— 阿吉特·辛格（Ajit Singh）
source

13

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

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

返回“ undefined”将禁用确认

注意：返回“ null”不适用于IE

您也可以使用“ undefined”禁用确认

window.onbeforeunload = undefined;

— 米娜·马塔（Mina Matta）
source

11

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

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

将询问用户他要留下还是离开。

— 戴维·贝朗格
source

知道为什么这不起作用吗？我正在使用chrome（最新版本）以及大量的jquery插件，但是当我关闭窗口时没有收到任何警报。

— 嘿

@hey为什么要投反对票？它正在工作...。您需要确保它不在的范围内jQuery(document)，我建议在加载所有插件后立即将其正确放置。另外，此代码段不会发出任何警报……仅是带有的演示return。

— 大卫·贝朗格（DavidBélanger）2014年

7

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

window.onbeforeunload = s => "";

要询问用户何时页面上的某些内容已被修改，请参见此答案。

— 斯宾塞
source

如果我刷新页面或只是退出，也会触发吗？

— Si8

是的，它将在刷新或退出时触发。

— spencer.sm

无论如何，什么时候知道它何时刷新？

— 2013年

当用户第一次进入页面时，与刷新页面相反。

— Si8

不好了。用户首次访问该页面时不会触发。仅在关闭或更改页面或刷新时。

— spencer.sm

4

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

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

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

— 西蒙·弗兰岑
source

3

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

— 埃米尔·马马佐夫（Emir Mamashov）
source

1

启用和禁用一点点帮助

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

— l2aelba
source

1

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

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

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

});

— 拉吉·沙玛（Raj Sharma）
source