javascript - 仅当 'beforeunload' 函数返回 true 时才运行 Javascript 代码

Question

我使用 JQuery 来捕获用户离开页面时的卸载事件。这工作得很好，但我有一些数据只需要在用户真的想要离开的情况下保存。

这是我的第 22 条军规。如果我过早保存代码并且用户不想离开，我就破坏了支持代码的 Web 服务的状态。

因此，只有当“beforeunload”对话框返回 true 时，我才需要完成执行代码这一几乎无法克服的任务。

$(window).on('beforeunload', function(e) {
    var info = * some info to save the current page state *
    return 'Are you sure you want to navigate away from the Test Runner?';

    //unreachable place where I wish I could ajax 'info' back to safety
});

此代码将弹出一个对话框，询问“您确定要离开测试运行程序吗？”如果用户点击取消，将阻止用户离开页面。

还有一个想法:

$(window).on('onunload', function(e) {
    var info = * some info to save the current page state *
    var r=confirm('Are you sure you want to stop the Test Runner?');
    if(r==true)
    {
        //place where I wish I could ajax 'info' back to safety
        return 'leaving'
    }
    else
        return 'leaving unsaved';
});

这第二种方法不会阻止用户以任何方式离开，但在一种情况下会先执行一些保存代码，而在另一种情况下会将他们引导回冷状态。这种方法的问题是大多数浏览器(理所当然地)阻止确认框在 window.onunload 状态下启动，这要归功于 90 年代的网络开发人员多年来用它蒙蔽了可怜的拨号网络冲浪者。

免责声明: 我很清楚，我们 Web 开发人员社区强烈反对阻止用户离开页面并在他们尝试这样做时在后台执行代码。当我看到类似这样的问题时，“我如何防止用户离开我非常棒的网站”我的下意识 react 通常是，“不要这样做!”这就是说这是不同的。这是针对特定客户的专门页面，我们需要将其作为 panic 预防措施。我是好人之一，我保证。我是你中的一员。

Answer 1

尝试同时使用这两个事件。您需要的是同一范围内的共享变量，而不是全局变量。 onbeforeunload 将在对话框出现之前触发。 onunload 仅在用户单击退出窗口/选项卡时触发。

// Use a variable in the same scope of both events:
var savedState;

$(window).on('beforeunload', function(e) {

  savedState = "what the user currently made";

  return "Sure U are?";
});

$(window).on('unload', function(e) {

  // user didn't save!!
  // your auto-save function:
  auto_save(savedState);

  // browser leaves this tab.
});

作为范围，我指的是类似 (function () { })(); 或任何其他(构造函数或函数式)函数。