Question

我正在尝试设置onbeforeunload标记，以阻止用户离开特定页面，当且仅当他们有未保存的内容时，并且仅在特定页面上（我们使用单个母版页）。我很快发现在onbeforeunload标记中返回## any ##总会触发javascript确认，并在弹出窗口中放置## something ##。显然，这是现在预期的行为，但它确实消除了我使用我自己的确认框的想法，该确认框可以用if语句控制。

我尝试了这个，但它不起作用：

<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。我希望将返回函数放入函数中可以解决问题，但没有这样的运气。

所以我的问题是，是否有一种方法可以使用onbeforeunload标记和内置的返回值来绕过它，等待该字段的值？或者，（虽然这不太理想）我想我可以动态添加或删除onbeforeunload标记，在我设置的所有位置或重置getElementById标记。不幸的是，我也不知道该怎么做。哦，我完全不受使用jQuery或任何其他JavaScript库的限制。

Answer 1

不确定这是否符合设计要求，但如果您从事件处理程序中return null，可能会获得您想要的结果：

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中测试。如果有人可以确认这在任何一种浏览器中都有效，那就太好了。

修改：添加另一个更易于使用并在Chrome中运行的示例（JSFiddle中的iFrame导致问题）。在这里查看示例：http://andrewawhitaker.com/examples/onbeforeunload_test.html。在输入中键入“true”以查看确认。如果'true'不是输入的值，则不显示任何对话框。适用于FF和Chrome，仍然无法保证IE。

更新2：更可靠的方法是在以编程方式设置dirtyFlag的值时添加和删除事件侦听器，只需适当地删除或添加事件处理程序：

var isDirty = function() { ... };
if (/* form is dirty*/) {
    window.onbeforeunload = isDirty;
}
else {
    window.onbeforeunload = null;
}

Answer 2

您无法更改onbeforeunload的默认行为。

https://developer.mozilla.org/en/DOM/window.onbeforeunload

http://msdn.microsoft.com/en-us/library/ms536907(VS.85).aspx

Javascript，控制onbeforeunload标记

2 个答案: