如何显示“您确定要离开此页面吗？”何时更改提交？ [英] How to show the "Are you sure you want to navigate away from this page?" when changes committed?
问题描述
在计算器中，如果您开始进行更改，然后尝试离开页面，则会显示一个javascript确认按钮，并询问：您确定要从此页面导航吗？ blee blah bloo ...
以前有谁执行过这个操作，我如何跟踪所做的更改？
我相信我自己可以这样做，我正在努力向您学习专家的良好做法。
我尝试了以下方法，但仍然无法使用：
< html>
< body>
< p>关闭页面以触发onunload事件。< / p>
< script type =text / javascript>
var changes = false;
window.onbeforeunload = function（）{
if（changes）
{
var message =你确定要离开这个页面吗？\\\
\ n您已开始编写或编辑帖子。\ n \\\
按OK继续或取消保留当前页面。;
if（confirm（message））return true;
else返回false;
}
}
< / script>
< input type ='text'onchange ='changes = true;'> < /输入>
< / body>
< / html>
任何人都可以发表一个例子吗？
更新（2017）
=https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload#Browser_compatibility =noreferrer>删除所有这些信息。浏览器现在只显示通用消息。由于我们不必担心设置消息，因此它很简单：
//启用导航提示
window.onbeforeunload = function（）{
return true;
};
//移除导航提示
window.onbeforeunload = null;
阅读下面的旧版浏览器支持。
更新（2013年）
原始答案适用于IE6-8和FX1-3.5（这是我们在2009年编写时的目标），但现在已经过时了，并且在大多数当前浏览器中都不起作用 - 我将它留在下面作为参考。
window.onbeforeunload 没有被所有浏览器一致处理。它应该是一个函数引用，而不是一个字符串（正如原来的答案所述），但它可以在较旧的浏览器中使用，因为它们大多数的检查似乎是将任何内容分配给 onbeforeunload （包括一个返回 null 的函数）。
设置窗口。 onbeforeunload 添加到函数引用中，但在旧版浏览器中，您必须设置事件的 returnValue ，而不仅仅是返回一个字符串：
var confirmOnPageExit =函数（e）
{
//如果我们没有通过事件获取窗口.event
e = e || window.event;
var message ='任何文本都会阻止导航并显示提示';
//对于版本4之前的IE6-8和Firefox
if（e）
{
e.returnValue = message;
}
//对于Chrome，Safari，IE8 +和Opera 12+
返回消息;
};
你不能让 confirmOnPageExit 做如果您希望用户在没有消息的情况下继续，则检查并返回null。您仍然需要删除事件以可靠地打开和关闭它：
//将它打开 - 指定返回的函数字符串
window.onbeforeunload = confirmOnPageExit;
//关闭 - 完全删除函数
window.onbeforeunload = null;
原始答案（2009年工作）
打开它：
window.onbeforeunload =你确定要离开吗？;
要关闭它：
window.onbeforeunload = null;
请记住，这不是一个正常的事件 - 您无法在标准方式。
检查值？这取决于您的验证框架。
在jQuery中，这可能类似于（非常基本的示例）：
<$ p （$（this）.val（）！=）
window.onbeforeunload =$（$）你确定要离开吗？;
}）;
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 to navigate away from this page?" blee blah bloo...
Has anyone implemented this before, how do I track that changes were committed? I believe I could do this myself, I am trying to learn the good practices from you the experts.
I tried the following but still doesn't work:
<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>
Can anyone post an example?
Update (2017)
Modern browsers now consider displaying a custom message to be a security hazard and it has therefore been removed from all of them. Browsers now only display generic messages. Since we no longer have to worry about setting the message, it is as simple as:
// Enable navigation prompt
window.onbeforeunload = function() {
return true;
};
// Remove navigation prompt
window.onbeforeunload = null;
Read below for legacy browser support.
Update (2013)
The orginal answer is suitable for IE6-8 and FX1-3.5 (which is what we were targeting back in 2009 when it was written), but is rather out of date now and won't work in most current browsers - I've left it below for reference.
The window.onbeforeunload is not treated consistently by all browsers. It should be a function reference and not a string (as the original answer stated) but that will work in older browsers because the check for most of them appears to be whether anything is assigned to onbeforeunload (including a function that returns null).
You set window.onbeforeunload to a function reference, but in older browsers you have to set the returnValue of the event instead of just returning a 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;
};
You can't have that confirmOnPageExit do the check and return null if you want the user to continue without the message. You still need to remove the event to reliably turn it on and off:
// Turn it on - assign the function that returns the string
window.onbeforeunload = confirmOnPageExit;
// Turn it off - remove the function entirely
window.onbeforeunload = null;
Original answer (worked in 2009)
To turn it on:
window.onbeforeunload = "Are you sure you want to leave?";
To turn it off:
window.onbeforeunload = null;
Bear in mind that this isn't a normal event - you can't bind to it in the standard way.
To check for values? That depends on your validation framework.
In jQuery this could be something like (very basic example):
$('input').change(function() {
if( $(this).val() != "" )
window.onbeforeunload = "Are you sure you want to leave?";
});
这篇关于如何显示“您确定要离开此页面吗？”何时更改提交？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
