捕获 window.onbeforeunload

Question

我有一个表单，其中输入字段保存在 onChange 中。在 Firefox (5) 中，即使窗口关闭，该功能也有效，但对于 Chrome 和 IE 则不然，即使他们在输入后尝试关闭窗口，我也需要确保保存这些数据一个字段，但 onBlur 事件尚未发生（即，他们已在文本框中输入了一些内容，但尚未从其中跳出）。

我已阅读以下有关使用 window.onbeforeunload 的文章： 第1条 文章 2

如果我使用以下内容：

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

那么我会收到一个带有 onbeforeunload 中。

但是如果我尝试：

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

那么在任何浏览器中都不会发生任何事情，甚至是 Firefox。

我想要实现的是：

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

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

Answer 1

您必须从onbeforeunload中返回：

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

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

根据评论更新

，警报似乎不再适用于较新的版本，其他一切都可以： ）

来自 MDN

自 2011 年 5 月 25 日起，HTML5 规范规定调用 window.showModalDialog()、window.alert()、window.confirm()< /code> 和 window.prompt() 方法在此事件期间可能会被忽略。




还建议通过 addEventListener 接口使用它：

您可以并且应该通过window.addEventListener()和beforeunload事件处理此事件。< /p>

更新后的代码现在如下所示：

window.addEventListener("beforeunload", function (e) {
  saveFormData();

  (e || window.event).returnValue = null;
  return null;
});

Answer 2

关于如何使用此事件似乎有很多错误信息（即使在本页上已投票的答案中也是如此）。

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

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

在我编写的应用程序中，我想提示用户在离开页面之前让他们知道他们有未保存的更改。浏览器会向他们提示消息，之后，一切就不再由我掌控了，用户可以选择留下或离开，但此时您不再拥有对应用程序的控制权。

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

onbeforeunload = function() {

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


};

如果（且仅当）应用程序有未保存的更改，则浏览器会提示用户要么忽略我的消息（并无论如何离开页面），要么不离开页面。如果他们无论如何都选择离开该页面，那就太糟糕了，您对此无能为力（也不应该做）。

Answer 3

使用“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 /事件/卸载前

Answer 4

我似乎来得有点晚了，而且更像是一个初学者，而不是任何专业人士；但这对我有用：

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

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

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

在我看来，该页面与发起者的要求高度相关（特别是标题为 window.html 的部分）。 onunload 和 window.onbeforeunload ）：
https://javascript.info/onload-ondomcontentloaded

希望这会有所帮助。

Answer 5

你只是不能在 onbeforeunload 中执行alert()，其他的都可以

Answer 6

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

<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 7

是的，楼上大家都这么说。

对于您当前的情况，您可以使用 onInput（html5 中的新功能）来代替 onChange。输入事件是相同的，但它会在每次击键时触发，无论焦点如何。也适用于选择和所有其他操作，就像 onChange 一样。