发表新帖
发表新帖

How to show the “Are you sure you want to navigate away from this page?” when changes committed?

前端 未结
关注
17 1572
深忆病人
深忆病人 2020-11-22 02:11

Here in stackoverflow, if you started to make changes then you attempt to navigate away from the page, a javascript confirm button shows up and asks: \"Are you sure you want

相关标签:
17条回答
  • 無奈伤痛
    2020-11-22 02:45

    With JQuery this stuff is pretty easy to do. Since you can bind to sets.

    Its NOT enough to do the onbeforeunload, you want to only trigger the navigate away if someone started editing stuff.

    0 讨论(0)
  • 鱼传尺愫
    2020-11-22 02:45

    here is my 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>

    And so this is how I did something similar in 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!");
}
}
    0 讨论(0)
  • 孤城傲影
    2020-11-22 02:47

    There is an "onunload" parameter for the body tag you can call javascript functions from there. If it returns false it prevents navigating away.

    0 讨论(0)
  • 一整个雨季
    2020-11-22 02:49

    Here try this it works 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>
    0 讨论(0)
  • 礼貌的吻别
    2020-11-22 02:52

    You can add an onchange event on the textarea (or any other fields) that set a variable in JS. When the user attempts to close the page (window.onunload) you check the value of that variable and show the alert accordingly.

    0 讨论(0)
  • 我在风中等你
    2020-11-22 02:52

    It can be easily done by setting a ChangeFlag to true, on onChange event of TextArea. Use javascript to show confirm dialog box based on the ChangeFlag value. Discard the form and navigate to requested page if confirm returns true, else do-nothing.

    0 讨论(0)
 看不清?
提交回复
热议问题