在这里的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>

有人能举个例子吗?


当前回答

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

截至69.0.3497.92 Chrome未达到标准。然而,有一个错误报告存档,审查正在进行中。Chrome要求returnValue通过引用事件对象来设置,而不是由处理程序返回的值。

作者有责任跟踪是否进行了修改;这可以通过变量来实现,也可以通过确保只在必要时处理事件来实现。

窗口。addEventListener('beforeunload',函数(e) { //取消标准规定的事件。 e.preventDefault (); // Chrome需要设置returnValue e.returnValue = "; }); 窗口。Location = '大约:空白';

其他回答

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

截至69.0.3497.92 Chrome未达到标准。然而,有一个错误报告存档,审查正在进行中。Chrome要求returnValue通过引用事件对象来设置,而不是由处理程序返回的值。

作者有责任跟踪是否进行了修改;这可以通过变量来实现,也可以通过确保只在必要时处理事件来实现。

窗口。addEventListener('beforeunload',函数(e) { //取消标准规定的事件。 e.preventDefault (); // Chrome需要设置returnValue e.returnValue = "; }); 窗口。Location = '大约:空白';

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

这是我的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为true,在TextArea的onChange事件。使用javascript根据ChangeFlag值显示确认对话框。如果确认返回true,则丢弃表单并导航到请求页面,否则什么都不做。

body标签有一个"onunload"参数,你可以从那里调用javascript函数。如果返回false,则阻止导航离开。