仅当'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
});

这段代码会弹出一个对话框,询问"你确定要离开Test Runner吗？" 如果用户单击取消将阻止用户离开页面.

这是另一个想法:

$(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开发人员社区强烈反对阻止用户在尝试执行此操作时阻止页面离开页面并在后台执行代码.当我看到诸如 "我如何阻止用户离开我真棒的网站"之类的问题时,我的下意识反应通常是"不要这样做!" 这说不同.这是针对特定客户的专用页面,我们需要将其作为恐慌预防措施.我保证,我是其中一个好人.我是你的一员.

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 () { })();或任何其他(构造函数或功能)函数.

Answer 2

在 Chrome 中测试并工作。

$(window).on('beforeunload', function () {
   return 'Are you sure you want to navigate away from the Test Runner?';
});
$(window).on('unload', function () {
   $.ajax({ url: '/default.aspx', async: false });
});