我如何要求用户确认他们要离开页面?
How do I ask the user to confirm they want to leave the page?
我有一个包含多个页面的网站,用户可以在其中添加和编辑信息。为了提供一致的UI,我有以下JavaScript函数...
function setWindowBeforeUnload(changed) {
$(window).on("beforeunload", function() {
if (confirmLeave && changed && changed()) {
return "You haven't saved the information. If you leave this page, the information will be lost.";
}
});
}
confirmLeave
是一个全局变量,它指定我们是否要在导航离开之前要求他们确认(如果我们在成功保存后导航到另一个页面,我们不会这样做)。 changed
是一个检查实体是否发生变化的函数。
这是从详细信息页面(比如客户页面)调用的,如下所示...
$(document).ready(function() {
setWindowBeforeUnload(customerChanged);
});
function customerChanged() {
// Checks the data and returns true or false as appropriate
}
这一切都很好,直到最近,change in Chrome 破坏了它。
我搜索了几个小时,发现很多人都建议这样的代码...
addEventListener('beforeunload', function(event) {
event.returnValue = 'You have unsaved changes.';
});
...它可以正常工作,只是每当他们离开页面时都会发出警告,无论数据是否已更改。
一旦我尝试添加任何逻辑(例如我在第一个示例中的检查代码),它就不起作用...
function setWindowBeforeUnload(changed) {
addEventListener('beforeunload', function(event) {
if (confirmLeave && changed && changed()) {
event.returnValue = 'You have unsaved changes.';
}
});
}
使用此代码,我可以在不收到警告的情况下离开该页面。
现在有什么方法可以重现我原来的行为吗?
您可以在处理程序中使用逻辑,只是不能再有自定义消息了。
请参阅下面的代码。使用 "Run code snippet" 模拟导航。 运行 片段,运行 再次没有确认。将按钮切换到 "false" 运行 代码段并获得确认。
var test = true;
function otherTest() {
return true;
}
addEventListener('beforeunload', function(event) {
if(!test || !otherTest()) {
event.returnValue = 'You have unsaved changes.';
}
});
document.getElementById('theButton').addEventListener('click', function(event) {
test = !test;
this.innerHTML = test.toString();
});
<p>Click the button to turn the confirm on and off</p>
<button id="theButton">true</button>
我有一个包含多个页面的网站,用户可以在其中添加和编辑信息。为了提供一致的UI,我有以下JavaScript函数...
function setWindowBeforeUnload(changed) {
$(window).on("beforeunload", function() {
if (confirmLeave && changed && changed()) {
return "You haven't saved the information. If you leave this page, the information will be lost.";
}
});
}
confirmLeave
是一个全局变量,它指定我们是否要在导航离开之前要求他们确认(如果我们在成功保存后导航到另一个页面,我们不会这样做)。 changed
是一个检查实体是否发生变化的函数。
这是从详细信息页面(比如客户页面)调用的,如下所示...
$(document).ready(function() {
setWindowBeforeUnload(customerChanged);
});
function customerChanged() {
// Checks the data and returns true or false as appropriate
}
这一切都很好,直到最近,change in Chrome 破坏了它。
我搜索了几个小时,发现很多人都建议这样的代码...
addEventListener('beforeunload', function(event) {
event.returnValue = 'You have unsaved changes.';
});
...它可以正常工作,只是每当他们离开页面时都会发出警告,无论数据是否已更改。
一旦我尝试添加任何逻辑(例如我在第一个示例中的检查代码),它就不起作用...
function setWindowBeforeUnload(changed) {
addEventListener('beforeunload', function(event) {
if (confirmLeave && changed && changed()) {
event.returnValue = 'You have unsaved changes.';
}
});
}
使用此代码,我可以在不收到警告的情况下离开该页面。
现在有什么方法可以重现我原来的行为吗?
您可以在处理程序中使用逻辑,只是不能再有自定义消息了。 请参阅下面的代码。使用 "Run code snippet" 模拟导航。 运行 片段,运行 再次没有确认。将按钮切换到 "false" 运行 代码段并获得确认。
var test = true;
function otherTest() {
return true;
}
addEventListener('beforeunload', function(event) {
if(!test || !otherTest()) {
event.returnValue = 'You have unsaved changes.';
}
});
document.getElementById('theButton').addEventListener('click', function(event) {
test = !test;
this.innerHTML = test.toString();
});
<p>Click the button to turn the confirm on and off</p>
<button id="theButton">true</button>