Question

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

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

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

我尝试了以下代码，但这不起作用：

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

Answer 2

我曾经遇到同样的问题，无法得到一个好的解决方案。我找到的解决方法是在重新加载页面之前取消订阅onbeforeunload。然后在重新加载页面后附加它。

Answer 3

单击其中一个导航按钮时设置变量，如var navigating = true;并在onbeforeunload事件处理程序中检查它是否正在导航。

仅在用户关闭浏览器/标签

3 个答案: