如何显示“您确定要远离此页面吗？”什么时候进行更改？

https://stackoverflow.com/questions/1119289

12-09-2019
|

题

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

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

我尝试了以下方法但仍然不起作用：

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

谁能发布一个例子吗？

解决方案

更新（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?";
});

其他提示

这 onbeforeunload Microsoft-ism 是我们拥有的最接近标准解决方案的东西，但请注意浏览器支持参差不齐；例如对于 Opera，它仅适用于版本 12 及更高版本（在撰写本文时仍处于测试阶段）。

另外，对于 最大兼容性, ，您需要做的不仅仅是简单地返回一个字符串，如上所述 Mozilla 开发者网络.

例子： 定义以下两个函数来启用/禁用导航提示（参见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>

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

要在Chrome和Safari这项工作，你将不得不做这样的

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

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

与jQuery 这东西是很容易做到。既然你可以绑定到组。

它不够做onbeforeunload，你要只触发导航路程，如果有人开始编辑东西。

jquerys 'beforeunload' 对我来说真是棒极了。

$(window).bind('beforeunload', function(){
    if( $('input').val() !== '' ){
        return "It looks like you have input you haven't submitted."
    }
});

这是一种简单的方法，如果任何数据被输入到的形式，并且不显示，如果表单提交该消息呈现消息：

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

对于谁是寻找一个简单的解决方案新的人，只是尝试 Areyousure.js

要扩大 Keith的已经很了不起了答案：

定制警告消息

要允许定制警告消息，则可以在这样的功能把它包装：

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结合此以形成元素

如果使用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");
    // ...
}

下面尝试此它工作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>

当用户开始在更改形式，一个布尔标志将被设置。如果用户然后尝试导航离开该页面，你检查的该标志window.onunload 事件。如果设置了标志，您可以通过它返回一个字符串显示信息。返回消息作为字符串将弹出一个确认对话框包含您的消息。

如果您使用AJAX提交更改，则可以设置一个标志，以false的修改已经提交后（即，在AJAX成功事件）。

这标准状态可以通过取消来控制提示卸载前事件或将返回值设置为非空值. 。它还指出作者应该使用 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';

可以对在JS设置一个变量textarea的（或任何其他字段）添加onchange事件。当用户试图关闭页面（window.onunload）您检查变量的值，并相应地示警戒。

基于这个线程所有的答案

，我写了下面的代码，它为我工作。

如果你只需要被检查的onunload事件一些输入/ 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?";   
    };
});

这是我的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!");
}
}

它可以通过设置能够容易地做了的 ChangeFlag 以真，上的的onChange 的的TextArea的事件即可。使用JavaScript来显示基于在 ChangeFlag 值确认对话框。丢弃的形式，如果定位到请求页面确认返回true，否则什么也不做

您想使用什么是JavaScript中的onunload事件。

下面是一个例子： http://www.w3schools.com/jsref/event_onunload。 ASP

有对于身体标签可以调用JavaScript函数从那里一个“onunload的”参数。如果返回false它防止导航程。

许可以下： CC-BY-SA 和归因

不隶属于 StackOverflow