window.onbeforeunload无法正常工作

Question

我有一个表单,其中输入字段保存在更改.在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

你必须return从onbeforeunload:

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

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

UPDATE

根据评论,警报似乎不再适用于较新版本,其他任何事情:)

来自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;
});

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

使用“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