Javascript，控制onbeforeunload标签 [英] Javascript, controlling an onbeforeunload tag
问题描述
我正在尝试设置onbeforeunload标记，以阻止用户仅当特定页面具有未保存的内容时才离开特定页面，并且仅在特定页面上(我们使用单个母版页面).我很快发现，在onbeforeunload标记中返回## anything ##总是会触发javascript确认，并将## anything ##放在弹出窗口中.显然，这现在是预期的行为，但是它的确消除了我使用可以通过if语句控制的我自己的确认框的想法.
I'm trying to set up a onbeforeunload tag to stop a user from leaving specific pages if and only if they have unsaved content, and only on specific pages (we're using a single master page). I quickly discovered that having a return ##anything## in the onbeforeunload tag would always trigger a javascript confirm, and puts ##anything## inside the pop-up. Obviously, this is now expected behavior, but it does take away my idea of using my own confirm box that could be controlled with an if statement.
我尝试了一下，但是没用:
I tried this, and it didn't work:
<body class="yui-skin-sam" onbeforeunload="document.onFormClose();">
<script>
document.onFormClose = function () {
if (document.getElementById('DirtyFlag').value == "true") {
document.getElementById('DirtyFlag').value == "false";
return 'You will lose all changes made since your last save';
}
}
</script>
其中DirtyFlag是一个隐藏字段，如果存在任何未保存的更改，该字段将变为true.我希望将return放入函数中可以解决问题，但没有这种运气.
where DirtyFlag is a hidden field that turns true if any unsaved changes exist. I'd hoped that putting the return inside the function would do the trick, but no such luck.
所以我的问题是，有没有一种方法可以将onbeforeunload标记与内置的返回值结合使用，从而在该字段的值保留之前将其绕过?或者，(尽管这不太理想)，我想我可以在设置或重置getElementById标记的所有位置动态地添加或删除onbeforeunload标记.不幸的是，我也不知道该怎么做.哦，我完全不能使用jQuery或任何其他javascript库.
So my question is, is there a way to use the onbeforeunload tag with a return built in that will bypass it pending the value of that field? Alternatively, (though this would be less ideal) I suppose I could add or remove the onbeforeunload tag dynamically, in all the places I set or reset the getElementById tag. Unfortunately, I don't know how to do that either. Oh, and I'm restricted completely from using jQuery or any other javascript library.
推荐答案
不确定这是否符合设计要求，但是如果您从事件处理程序中返回null ，则您可能>获得所需的结果:
Not sure if this is as designed, but if you return null from the event handler, you might get the results you want:
window.onbeforeunload = function() {
var el = document.getElementById("dirtyFlag");
if (el.value === "true") {
return 'You will lose all changes made since your last save';
}
else {
return null;
}
};
以下内容在FF中有效: http://jsfiddle.net/andrewwhitaker/chZJ8/.尝试将隐藏的 input 的值更改为"true"，您应该开始出现确认对话框.但是，我无法在Chrome中使用它，并且无法在IE中进行测试.如果有人可以确认这两种浏览器中的任何一种都可以，那就太好了.
The following works in FF: http://jsfiddle.net/andrewwhitaker/chZJ8/. Try changing the hidden inputs value to "true" and you should start getting the confirmation dialog. However, I cannot get it to work in Chrome and I'm unable to test in IE. It would be great if someone could confirm this works in either of those browsers.
编辑:添加了另一个更易于使用且可在Chrome中运行的示例(JSFiddle中的iFrame引起了问题).在此处查看示例: http://andrewawhitaker.com/examples/onbeforeunload_test.html .在输入中输入"true"以查看确认.如果"true"不是输入值，则不会显示对话框.可以在FF和Chrome中使用，但仍不能担保IE.
Adding another example that's easier to use and works in Chrome (the iFrame in JSFiddle was causing issues). Check out the example here: http://andrewawhitaker.com/examples/onbeforeunload_test.html. Type 'true' in the input to see a confirmation. If 'true' is not the value of the input, no dialog is displayed. Works in FF and Chrome, still can't vouch for IE.
更新2:一种更可靠的方法是在通过编程方式设置 dirtyFlag 的值时添加和删除事件侦听器，而只需删除或添加适当的事件处理程序:
Update 2: A more reliable way of doing this is probably to add and remove the event listener when you set the value for dirtyFlag programmatically, just remove or add the event handler appropriately:
var isDirty = function() { ... };
if (/* form is dirty*/) {
window.onbeforeunload = isDirty;
}
else {
window.onbeforeunload = null;
}
这篇关于Javascript，控制onbeforeunload标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
