297

在stackoverflow中，如果您开始进行更改然后您尝试离开页面，则会出现一个javascript确认按钮并询问：“您确定要离开此页面吗？” 呜呜呜……

以前有没有人实现过这个，我如何跟踪提交的更改？我相信我自己可以做到这一点，我正在努力向各位专家学习良好做法。

我尝试了以下但仍然无法正常工作：

<html>
<body>
    <p>Close the page to trigger the onunload event.</p>
    <script type="text/javascript">
        var changes = false;        
        window.onbeforeunload = function() {
            if (changes)
            {
                var message = "Are you sure you want to navigate away from this page?\n\nYou have started writing or editing a post.\n\nPress OK to continue or Cancel to stay on the current page.";
                if (confirm(message)) return true;
                else return false;
            }
        }
    </script>

    <input type='text' onchange='changes=true;'> </input>
</body>
</html>

任何人都可以发布一个例子吗？

4

18 回答 18

426

更新 (2017)

现代浏览器现在认为显示自定义消息是一种安全隐患，因此已将其从所有浏览器中删除。浏览器现在只显示通用消息。由于我们不再需要担心设置消息，所以很简单：

// Enable navigation prompt
window.onbeforeunload = function() {
    return true;
};
// Remove navigation prompt
window.onbeforeunload = null;

请阅读下文了解旧版浏览器支持。

更新 (2013)

原始答案适用于 IE6-8 和 FX1-3.5（这是我们在 2009 年编写它时的目标），但现在已经过时并且在大多数当前浏览器中都不起作用 - 我已经离开了下面以供参考。

window.onbeforeunload并非所有浏览器都一致对待。它应该是一个函数引用而不是一个字符串（如原始答案所述），但这将在较旧的浏览器中工作，因为对大多数浏览器的检查似乎是是否分配了任何东西onbeforeunload（包括返回的函数null）。

您设置window.onbeforeunload为函数引用，但在较旧的浏览器中，您必须设置returnValue事件的，而不仅仅是返回一个字符串：

var confirmOnPageExit = function (e) 
{
    // If we haven't been passed the event get the window.event
    e = e || window.event;

    var message = 'Any text will block the navigation and display a prompt';

    // For IE6-8 and Firefox prior to version 4
    if (e) 
    {
        e.returnValue = message;
    }

    // For Chrome, Safari, IE8+ and Opera 12+
    return message;
};

如果您希望用户在没有消息的情况下继续，则不能confirmOnPageExit进行检查并返回 null。您仍然需要删除事件才能可靠地打开和关闭它：

// Turn it on - assign the function that returns the string
window.onbeforeunload = confirmOnPageExit;

// Turn it off - remove the function entirely
window.onbeforeunload = null;

原始答案（2009年工作）

打开它：

window.onbeforeunload = "Are you sure you want to leave?";

要关闭它：

window.onbeforeunload = null;

请记住，这不是一个正常的事件 - 您不能以标准方式绑定到它。

检查值？这取决于您的验证框架。

在 jQuery 中，这可能类似于（非常基本的示例）：

$('input').change(function() {
    if( $(this).val() != "" )
        window.onbeforeunload = "Are you sure you want to leave?";
});
于 2009-07-13T13:03:24.970 回答
40

微软主义是我们所拥有的onbeforeunload最接近标准解决方案的东西，但请注意浏览器支持并不均衡；例如，对于 Opera，它仅适用于版本 12 及更高版本（在撰写本文时仍处于测试阶段）。

此外，为了获得最大的兼容性，您需要做的不仅仅是返回一个字符串，如Mozilla Developer Network中所述。

示例：定义以下两个函数来启用/禁用导航提示（参见 MDN 示例）：

function enableBeforeUnload() {
    window.onbeforeunload = function (e) {
        return "Discard changes?";
    };
}
function disableBeforeUnload() {
    window.onbeforeunload = null;
}

然后定义一个这样的表格：

<form method="POST" action="" onsubmit="disableBeforeUnload();">
    <textarea name="text"
              onchange="enableBeforeUnload();"
              onkeyup="enableBeforeUnload();">
    </textarea>
    <button type="submit">Save</button>
</form>

这样，只有在用户更改了文本区域时才会警告用户导航离开，并且在他实际提交表单时不会收到提示。

于 2009-07-13T13:21:43.980 回答
20

要在 Chrome 和 Safari 中进行这项工作，您必须这样做

window.onbeforeunload = function(e) {
    return "Sure you want to leave?";
};

参考：https ://developer.mozilla.org/en/DOM/window.onbeforeunload

于 2012-03-26T09:48:10.110 回答
18

使用 JQuery，这些东西很容易做到。因为你可以绑定到集合。

仅执行 onbeforeunload 是不够的，如果有人开始编辑内容，您只想触发导航离开。

于 2009-07-13T13:04:07.013 回答
14

jquery 'beforeunload' 对我很有用

$(window).bind('beforeunload', function(){
    if( $('input').val() !== '' ){
        return "It looks like you have input you haven't submitted."
    }
});
于 2012-07-11T19:48:02.237 回答
12

对于正在寻找简单解决方案的新人，只需尝试Areyousure.js

于 2013-12-17T15:51:20.317 回答
11

如果将任何数据输入到表单中，这是一种显示消息的简单方法，并且在提交表单时不显示消息：

$(function () {
    $("input, textarea, select").on("input change", function() {
        window.onbeforeunload = window.onbeforeunload || function (e) {
            return "You have unsaved changes.  Do you want to leave this page and lose your changes?";
        };
    });
    $("form").on("submit", function() {
        window.onbeforeunload = null;
    });
})
于 2013-03-03T18:27:44.060 回答
8

扩展基思已经惊人的答案：

自定义警告消息

要允许自定义警告消息，您可以将其包装在如下函数中：

function preventNavigation(message) {
    var confirmOnPageExit = function (e) {
        // If we haven't been passed the event get the window.event
        e = e || window.event;

        // For IE6-8 and Firefox prior to version 4
        if (e)
        {
            e.returnValue = message;
        }

        // For Chrome, Safari, IE8+ and Opera 12+
        return message;
    };
    window.onbeforeunload = confirmOnPageExit;
}

然后只需使用您的自定义消息调用该函数：

preventNavigation("Baby, please don't go!!!");

再次启用导航

要重新启用导航，您只需window.onbeforeunload将null. 就是这样，包裹在一个可以在任何地方调用的简洁的小函数中：

function enableNavigation() {
    window.onbeforeunload = null;
}

使用 jQuery 将 this 绑定到表单元素

如果使用 jQuery，这可以很容易地绑定到表单的所有元素，如下所示：

$("#yourForm :input").change(function() {
    preventNavigation("You have not saved the form. Any \
        changes will be lost if you leave this page.");
});

然后允许提交表单：

$("#yourForm").on("submit", function(event) {
    enableNavigation();
});

动态修改的表格：

preventNavigation()并且enableNavigation()可以根据需要绑定到任何其他功能，比如动态修改表单，或者点击发送AJAX请求的按钮。我通过在表单中​​添加一个隐藏的输入元素来做到这一点：

<input id="dummy_input" type="hidden" />

然后，每当我想阻止用户离开时，我都会触发该输入的更改以确保preventNavigation()执行：

function somethingThatModifiesAFormDynamically() {

    // Do something that modifies a form

    // ...
    $("#dummy_input").trigger("change");
    // ...
}
于 2014-12-29T20:26:02.347 回答
3

当用户开始对表单进行更改时，将设置一个布尔标志。如果用户随后尝试离开该页面，则在window.onunload事件中检查该标志。如果设置了标志，则通过将消息作为字符串返回来显示消息。将消息作为字符串返回将弹出一个包含您的消息的确认对话框。

如果您使用 ajax 提交更改，您可以在提交更改false后（即在 ajax 成功事件中）设置标志。

于 2009-07-13T13:03:00.417 回答
3

在这里试试这个它100％有效 

<html>
<body>
<script>
var warning = true;
window.onbeforeunload = function() {  
  if (warning) {  
    return "You have made changes on this page that you have not yet confirmed. If you navigate away from this page you will lose your unsaved changes";  
    }  
}

$('form').submit(function() {
   window.onbeforeunload = null;
});
</script>
</body>
</html>
于 2013-10-01T17:56:38.000 回答
3

该标准规定，可以通过取消beforeunload事件或将返回值设置为非空值来控制提示。它还指出作者应该使用 Event.preventDefault() 而不是 returnValue，并且向用户显示的消息是不可定制的。

截至 69.0.3497.92，Chrome 尚未达到标准。但是，已提交错误报告，并且正在进行审查。Chrome 要求通过引用事件对象而不是处理程序返回的值来设置 returnValue。

跟踪是否进行了更改是作者的责任；它可以通过变量或确保仅在必要时处理事件来完成。

window.addEventListener('beforeunload', function (e) {
    // Cancel the event as stated by the standard.
    e.preventDefault();
    // Chrome requires returnValue to be set.
    e.returnValue = '';
});
    
window.location = 'about:blank';

于 2018-09-16T21:31:18.627 回答
1

onchange您可以在 JS 中设置变量的 textarea（或任何其他字段）上添加事件。当用户尝试关闭页面（window.onunload）时，您检查该变量的值并相应地显示警报。

于 2009-07-13T13:03:06.517 回答
1

基于该线程上的所有答案，我编写了以下代码，它对我有用。

如果您只有一些需要检查 onunload 事件的 input/textarea 标签，则可以将 HTML5 数据属性分配为data-onunload="true"

例如。

<input type="text" data-onunload="true" />
<textarea data-onunload="true"></textarea>

并且 Javascript (jQuery) 看起来像这样：

$(document).ready(function(){
    window.onbeforeunload = function(e) {
        var returnFlag = false;
        $('textarea, input').each(function(){
            if($(this).attr('data-onunload') == 'true' && $(this).val() != '')
                returnFlag = true;
        });

        if(returnFlag)
            return "Sure you want to leave?";   
    };
});
于 2013-02-21T23:50:48.997 回答
1

这是我的html 

<!DOCTYPE HMTL>
<meta charset="UTF-8">
<html>
<head>
<title>Home</title>
<script type="text/javascript" src="script.js"></script>
</head>

 <body onload="myFunction()">
    <h1 id="belong">
        Welcome To My Home
    </h1>
    <p>
        <a id="replaceME" onclick="myFunction2(event)" href="https://www.ccis.edu">I am a student at Columbia College of Missouri.</a>
    </p>
</body>

这就是我在 javaScript 中做类似事情的方式

var myGlobalNameHolder ="";

function myFunction(){
var myString = prompt("Enter a name", "Name Goes Here");
    myGlobalNameHolder = myString;
    if (myString != null) {
        document.getElementById("replaceME").innerHTML =
        "Hello " + myString + ". Welcome to my site";

        document.getElementById("belong").innerHTML =
        "A place you belong";
    }   
}

// create a function to pass our event too
function myFunction2(event) {   
// variable to make our event short and sweet
var x=window.onbeforeunload;
// logic to make the confirm and alert boxes
if (confirm("Are you sure you want to leave my page?") == true) {
    x = alert("Thank you " + myGlobalNameHolder + " for visiting!");
}
}
于 2015-02-19T08:14:04.730 回答
0

您要使用的是 JavaScript 中的 onunload 事件。

这是一个例子：http ://www.w3schools.com/jsref/event_onunload.asp

于 2009-07-13T13:03:41.227 回答
0

可以通过在TextArea的onChange事件上将 ChangeFlag设置为 true来轻松完成。使用 javascript根据ChangeFlag值显示确认对话框。如果确认返回 true，则丢弃表单并导航到请求的页面，否则不做任何事情。

于 2009-07-13T13:08:49.077 回答
0

从WebAPIs->WindowEventHandler->onbeforeunload，它建议使用window.addEventListener()和beforeunload事件，而不是onbeforeunload.

语法示例

window.addEventListener("beforeunload", function(event) { ... });
window.onbeforeunload = function(event) { ... };

注意：HTML 规范声明作者应该使用Event.preventDefault()方法而不是使用Event.returnValue来提示用户。

因此，就您的情况而言，代码应如下所示：

//javascript
window..addEventListener("beforeunload", function(event) { 
    //your code

    // If you prevent default behaviour in Mozilla Firefox prompt will always be shown
    e.preventDefault();

    // Chrome requires returnValue to be set
    e.returnValue = '';
})
于 2021-04-01T06:22:17.937 回答
-1

body 标记有一个“onunload”参数，您可以从那里调用 javascript 函数。如果它返回 false 它会阻止导航离开。

于 2009-07-13T13:01:58.700 回答