捕获 window.onbeforeunload

Posted 2023-03-08

【中文标题】捕获 window.onbeforeunload

【英文标题】：Capturing window.onbeforeunload

【发布时间】：2015-06-23 05:27:33

【问题描述】：

我有一个表单，其中输入字段保存onChange。在 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();

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

【问题讨论】：

你说的第一种方法是对的。

是的 onbeforeunload 在 IE 和 Firefox 中有效，但在 Chrome 中无效

【参考方案1】：

你必须从returnonbeforeunload:

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


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

更新

根据 cmets，alert 似乎不再适用于较新的版本，其他任何事情都会发生 :)

来自MDN

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

也建议通过addEventListener接口使用这个：

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

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

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

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

【讨论】：

我试图用新版本的 Chrome、IE 和 Firefox 来捕捉闭幕事件。我只能用 IE 重现这个。所以看起来这已经不可能了？

好吧，这也不适用于 chrome。但我正在尝试关闭 websocket 连接，也许这是受限制的。

如果浏览器因操作系统关闭而关闭，这会触发吗？

@epoch 非常感谢您的回答。我怎样才能在没有任何警报的情况下实现这一目标？你的答案是有效的，但我需要它而不需要提醒。

【参考方案2】：

你不能在 onbeforeunload 中做 alert()，其他的都可以

【讨论】：

这正是我的问题。我什至看到了你的评论，只是没有意识到我的函数中还有一个“alert()”。所以在里面放一个 alert() 似乎会让浏览器完全忽略这个功能。

我记得 'alert' 以前曾与 onbeforeunload 一起使用

来自 MDN：“HTML 规范声明在此事件期间可以忽略对 window.alert()、window.confirm() 和 window.prompt() 方法的调用。”developer.mozilla.org/en-US/docs/Web/Events/beforeunload

【参考方案3】：

要在用户离开页面时弹出消息确认离开，您只需：

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

【参考方案4】：

是的，上面每个人都说。

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

【参考方案5】：

似乎有很多关于如何使用此事件的错误信息（甚至在此页面上的赞成答案中）。

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

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

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

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

onbeforeunload = function() 

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


;

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

【讨论】：

"...返回一个字符串，然后浏览器将提示给用户..." 至少几年来这不是真的；在 16 年 12 月的 Firefox 或 Chrome 中肯定不是这样。它们显示自己的库存消息，而不是您返回的字符串。

这对我有用，只是它实际上并没有显示提示，甚至没有显示股票提示。它就像事件根本不存在一样关闭。

虽然现在，它甚至不返回字符串

【参考方案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

【讨论】：

根据最新的 MDN 主题。这是适用于警报的方法。非常感谢

【参考方案7】：

我似乎有点迟到了，而且比任何专业知识都更像一个初学者；但这对我有用：

window.onbeforeunload = function() 
      return false;
;

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

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

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

希望这会有所帮助。