Javascript，控制 onbeforeunload 标签答案

【问题标题】：Javascript, controlling an onbeforeunload tagJavascript，控制 onbeforeunload 标签
【发布时间】：2010-12-23 16:57:23
【问题描述】：

我正在尝试设置一个 onbeforeunload 标记，以阻止用户离开特定页面，当且仅当他们有未保存的内容时，并且仅在特定页面上（我们使用单个母版页）。我很快发现在 onbeforeunload 标记中返回 ##anything## 总是会触发 javascript 确认，并将 ##anything## 放在弹出窗口中。显然，这是现在的预期行为，但它确实消除了我使用我自己的可以通过 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。我希望将 return 放在函数中可以解决问题，但没有这样的运气。

所以我的问题是，有没有办法使用带有内置返回的 onbeforeunload 标签来绕过它等待该字段的值？或者，（尽管这不太理想）我想我可以在我设置或重置 getElementById 标记的所有位置动态添加或删除 onbeforeunload 标记。不幸的是，我也不知道该怎么做。哦，我完全不能使用 jQuery 或任何其他 javascript 库。

【问题讨论】：

我不确定你想要什么；您使用的术语有点偏离（没有“onbeforeunload”标签之类的东西；它是一个可以处理的事件）。你无法控制浏览器的行为——你所能做的就是让它弹出确认对话框。
我想要完成的是控制确认是否实际出现。如果我只是保留“onbeforeunload”事件，无论用户是否有未保存的数据，它都会给我弹出窗口。对措辞感到抱歉，我一直在抨击这个有点太久了......

标签： javascript html onbeforeunload

【解决方案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/。尝试将隐藏的inputs 值更改为“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;
}

【讨论】：

适用于 IE9。比null 更好地返回undefined，但显然有问题，因为事件似乎被引发了两次

【解决方案2】：

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

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

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

【讨论】：

我知道我无法改变行为，我试图控制它是否首先触发。我不想控制它，我只想要一个开关。