当提交更改时，如何显示“您确定要离开此页？”
这里在stackoverflow，如果你开始做改变，然后你试图离开页面，一个JavaScript的确认button显示，并问：“你确定要离开这个页面吗？ 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并没有被所有的浏览器一致地处理。 它应该是一个函数引用，而不是一个string（正如原来的答案所述），但是它可以在较旧的浏览器中工作，因为大部分的检查似乎是否有任何事情被分配给onbeforeunload （包括返回null的函数）。
您将window.onbeforeunload设置为函数引用，但在较旧的浏览器中，您必须设置事件的returnValue ，而不仅仅是返回一个string：
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。 您仍然需要移除该事件才能可靠地开启和closures：
// 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?";
要closures它：
window.onbeforeunload = null;
请记住，这不是一个正常的事件 – 你不能以标准的方式绑定它。
检查值？ 这取决于你的validation框架。
在jQuery中，这可能类似于（非常基本的示例）：
$('input').change(function() { if( $(this).val() != "" ) window.onbeforeunload = "Are you sure you want to leave?"; });
onbeforeunload微软ism是我们对标准解决scheme最接近的东西，但请注意，浏览器支持是不平衡的; 例如对于Opera而言，它只能在版本12及更高版本中工作（截至撰写本文时仍处于testing阶段）。
另外，为了达到最大的兼容性 ，您需要做的不仅仅是返回一个string，正如Mozilla开发者networking上所解释的那样。
示例：定义以下两个用于启用/禁用导航提示的function（参见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." } });
如果有任何数据input到表单中，这是一种简单的方法来显示消息，而不是在提交表单时显示消息：
$(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; }); })
对于正在寻找简单解决scheme的新用户，请尝试使用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(); });
dynamic修改表单：
可根据需要将preventNavigation()和enableNavigation()绑定到任何其他函数，例如dynamic修改表单或单击发送AJAX请求的button。 我通过在窗体中添加一个隐藏的input元素来实现这一点：
<input id="dummy_input" type="hidden" />
然后，当我想阻止用户浏览时，我会触发对该input的更改，以确保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事件中的该标志。 如果该标志已设置，则通过以stringforms返回来显示该消息。 以stringforms返回消息将popup包含消息的确认对话框。
如果您使用ajax提交更改，则可以在提交更改后（即在ajax成功事件中）将该标志设置为false 。
您可以添加一个onchange事件在textarea（或任何其他领域），在JS中设置一个variables。 当用户尝试closures页面（window.onunload）时，检查该variables的值并相应地显示警报。
基于这个线程的所有答案，我写了下面的代码，它为我工作。
如果只有一些需要检查onunload事件的input / textarea标记，则可以将data5属性指定为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!"); } }
通过在TextArea的 onChange事件上将ChangeFlag设置为true，可以轻松完成。 使用javascript显示基于ChangeFlag值的确认对话框。 如果确认返回true，则放弃表单并导航到请求的页面，否则不做任何事情 。
body标签有一个“onunload”参数，你可以从那里调用javascript函数。 如果它返回false，则防止导航离开。
你想使用的是JavaScript中的onunload事件。
这是一个例子： http : //www.w3schools.com/jsref/event_onunload.asp
