Question

我有一个表单，其中输入字段保存在更改。在firefox（5）中，即使窗口关闭也能正常工作，但对于Chrome和IE则没有，我需要确保即使他们在输入后尝试关闭窗口，我也会保存这些数据一个字段但是onBlur事件没有发生（即他们已经在文本框中键入了某些内容，但没有标记出来）。

我已经阅读了以下关于使用window.onbeforeunload的SO文章： article 1 article 2

如果我使用以下内容：

window.onbeforeunload = function() {
    return "onbeforeunload";
}

然后我在“onbeforeunload”中弹出一个弹出窗口。

但如果我尝试：

window.onbeforeunload = function() {
    alert("onbeforeunload");
}

然后在任何浏览器中都没有任何反应，甚至是firefox。

我想要实现的目标是：

window.onbeforeunload = function() {
    saveFormData();
}

如果有人能指出我可能出错的地方，我将不胜感激。

非常感谢

Answer 1

您必须return中的onbeforeunload：

window.onbeforeunload = function() {
    saveFormData();
    return null;
}

function saveFormData() {
    console.log('saved');
}

<强>更新

根据评论，警报似乎不再适用于新版本，其他任何事情都会发生：）

FROM MDN

自2011年5月25日起，HTML5规范声明在此事件期间可能会忽略对window.showModalDialog()，window.alert()，window.confirm()和window.prompt()方法的调用。

还建议通过addEventListener界面使用此功能：

更新的代码现在看起来像这样：

window.addEventListener()

Answer 2

关于如何使用此事件似乎存在很多错误信息（即使在此页面上的upvoted答案中）。

浏览器为特定目的提供onbeforeunload事件API：在此方法中唯一值得做的值得做的是返回一个字符串然后，浏览器将提示用户向他们表明在离开页面之前应该采取行动。您无法阻止它们离开页面（想象一下这对最终用户来说是一场噩梦）。

由于浏览器使用确认提示向用户显示您从事件侦听器返回的字符串，因此您无法在该方法中执行任何其他操作（例如执行ajax请求）。

在我编写的应用程序中，我想提示用户在离开页面之前让他们知道他们有未保存的更改。浏览器会通过消息提示他们，之后，用户可以选择留下或离开，但此时您无法再控制应用程序。

我如何使用它的一个例子（伪代码）：

onbeforeunload = function() {

  if(Application.hasUnsavedChanges()) {
    return 'You have unsaved changes. Please save them before leaving this page';
  }


};

如果（且仅当）应用程序有未保存的更改，则浏览器会提示用户忽略我的消息（并保留页面）或不离开页面。如果他们选择离开页面，那么太糟糕了，你无法做任何事情（也不应该做）。

Answer 3

你不能在onbeforeunload中做alert（），其他任何工作

Answer 4

要在用户离开页面确认离开时弹出消息，您只需执行以下操作：

<script>
    window.onbeforeunload = function(e) {
      return 'Are you sure you want to leave this page?  You will lose any unsaved data.';
    };
</script>

调用函数：

<script>
    window.onbeforeunload = function(e) {
       callSomeFunction();
       return null;
    };
</script>

Answer 5

我似乎对聚会晚了一点，而且比任何专业人士都更像是一个初学者。但是这对我有用：

window.onbeforeunload = function() {
      return false;
};

我将其作为内联脚本放置在Head和Meta元素之后，如下所示：

<script>
  window.onbeforeunload = function() {
     return false;
  }
</script>

在我看来，此页面与发起者的要求高度相关（尤其是window.onunload和window.onbeforeunload这些部分）： https://javascript.info/onload-ondomcontentloaded

希望这会有所帮助。

Answer 6

使用“ alert（）”时什么也不发生的原因可能是MDN解释的：“ HTML规范指出调用window.alert（），window.confirm（）和window.prompt（）方法在此事件期间可能会被忽略。”

但是还有另一个原因，无论是否调用alert（），您都可能根本看不到该警告，并且在同一站点上也进行了解释：

“ ...除非页面已经与之交互，否则浏览器可能不会显示在beforeunload事件处理程序中创建的提示”

这就是我在当前版本的Chrome和FireFox中看到的。我打开用以下代码设置了beforeunload处理程序的页面：

window.addEventListener
('beforeunload'
, function (evt)
  { evt.preventDefault();
    evt.returnValue = 'Hello';
    return "hello 2222"
  }
 );

如果我不单击页面，换句话说“不与之交互”，然后单击关闭按钮，则该窗口将关闭而不会发出警告。

但是，如果我在尝试关闭窗口或选项卡之前单击页面，则会收到警告，并且可以取消关闭窗口。

因此，这些浏览器是“智能的”（并且对用户友好），因为如果您对页面没有执行任何操作，则该页面不会有任何需要保存的用户输入，因此它们将关闭窗口而不会发出任何警告。

请考虑一下，如果没有此功能，任何网站都可能会自私地问您：“您真的要离开我们的网站吗？”，前提是您已经明确表示打算离开他们的网站。

查看： https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload

Answer 7

是的，所有人都在上面说。

对于您的直接情况，您可以使用onInput，而不是onChange，html5中的new。输入事件是相同的，但它会在每次击键时触发，无论焦点如何。也适用于选择和所有其余的就像onChange。

window.onbeforeunload无法正常工作

7 个答案: