javascript - 仅在用户关闭浏览器/选项卡时调用 beforeunload

Question

我在我的页面上使用了 beforeunload 事件，这样当用户试图关闭我的网站/标签时，我会提示用户他们不应该离开网站，除非填写所有表格。但问题是我的页面有一个丰富的表单，在每个部分表单填写后重新加载。

意味着页面有多个表单，每个表单都有自己的提交按钮。当用户保存一个 form 时，页面应该重新加载。但是在重新加载时 beforeunload 被解雇并询问用户“你想离开网站吗？”。用户并没有打算离开网站，他们只是重新加载了页面。

简而言之，我想避免在页面重新加载时使用 beforeunload，并且仅在用户尝试关闭选项卡或浏览器时调用它。那可能吗。

我尝试了以下代码，但没有成功:

window.onbeforeunload = function(e) {
  var e = e || window.event;
  var target = e.target.URL;

  if (target == "http://mywebsite.com/customerdetails")
  {
    return false;
  }
};

Answer 1

似乎在这两种情况下(提交和关闭窗口)target 是相同的。

保留一个像formSubmitted 这样的“标志”，并将其设置为false。提交表单后，将其设置为 true。在 onbeforeunload 中检查 formSubmitted 是 false 还是 true。

像这样:

var formSubmitted = false;

window.onbeforeunload = function(e) {
  var e = e || window.event;
  var target = e.target.URL;

  if (!formSubmitted)
  {
    return false;
  }
};

<form action="/asdf" onsubmit="formSubmitted = true">
  <input type="text" name="test" />
  <button>Submit</button>
</form>

http://output.jsbin.com/hayahut