如何在提交更改时显示“您确定要离开此页面吗？”

Question

如何在提交更改时显示“您确定要离开此页面吗？”

javascripthtmlmessageonbeforeunloadconfirm

315

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

有人可以提供一个例子吗？

- Shimmy Weitzhandler

3

为让您的示例正常工作，请更改函数为：myFunction() { window.onbeforeunload = "message"; }，然后更改输入：<input type='text' onchange='myFunction();'></input>。 - Keith

相关链接：https://dev59.com/N3RA5IYBdhLWcg3wzhRY - AlikElzin-kilaka

17个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sagar Gala · Answer 1

根据这个主题上的所有答案，我编写了以下代码并且它对我有效。

如果您只有一些需要检查onunload事件的输入/文本区域标记，您可以将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?";   
    };
});

- Makram Saleh · Answer 2

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

- Justin Stone · Answer 3

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

- Kaiwen Luo · Answer 4

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

- waqasahmed · Answer 5

你想要使用的是 JavaScript 中的 onunload 事件。

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

- simplyharsh · Answer 6

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

- stribika · Answer 7

在body标签中有一个"onunload"参数，你可以从这里调用JavaScript函数。如果它返回false，就会阻止页面跳转。